【实例】利用flex-grow-1特性，制作手风琴效果！

发布时间：2020-12-15 01:47:03 所属栏目：百科来源：网络整理

导读：代码比较粗糙但可以用，直接上代码： 1 ! DOCTYPE html 2 html lang ="zh-cmn-Hans" 3 head 4 title 网申传媒 / title 5 meta name ="keywords" content ="页面关键词" 6 meta name ="description" content ="页面描述" 7 meta charset ="utf-8" 8 meta htt

代码比较粗糙但可以用，直接上代码：

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <title>网申传媒</title>
 5 <meta name="keywords" content="页面关键词">
 6 <meta name="description" content="页面描述">
 7 <meta charset="utf-8">
 8 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
 9 <meta name="renderer" content="webkit">
10 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
11 <link rel="shortcut.icon" href="/favicon.ico" />
12 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
13 <style>
14 .flex-grow-1 {
15   width: 0px;
16 }
17 </style>
18 <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
19 <!--[if lt IE 9]>
20 <script src="https://cdn.jsdelivr.net/npm/[email?protected]/dist/html5shiv.min.js"></script>
21 <script src="https://cdn.jsdelivr.net/npm/[email?protected]/dest/respond.min.js"></script>
22 <![endif]-->
23 
24 </head>
25 <style>
26 .demo div {
27   width: 150px;
28   height: 300px;
29   transition: all .4s ease-in-out;
30 }
31 </style>
32 
33 <body>
34  <div class="container d-flex demo">
35    <div class="flex-grow-1 bg-danger text-white text-center">
36    1
37    </div>
38    <div class="bg-info text-white text-center">
39    2
40    </div>
41    <div class="bg-dark text-white text-center">
42    3
43    </div>
44    <div class="bg-primary text-white text-center">
45    4
46    </div>
47    <div class="bg-warning text-white text-center">
48    5
49    </div>
50  </div>
51 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
52 <script>
53 $(‘.demo div‘).mouseenter(function(){
54   $(‘.demo div‘).removeClass(‘flex-grow-1‘);
55   $(this).addClass(‘flex-grow-1‘);
56 });
57 </script>
58 </body>
59 </html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!