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

代码比较粗糙但可以用, 直接上代码:

 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/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
21 <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/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>

 

posted @ 2019-06-10 10:04 网申 阅读(...) 评论(...) 编辑 收藏