码迷,mamicode.com
首页 > Web开发 > 详细

CSS3——过渡模块——手风琴案例

时间:2020-03-26 19:23:16      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:doctype   font   鼠标   oat   宽度   over   hidden   hover   案例   

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS3过渡模块-手风琴效果</title>
 6     <style>
 7         *{margin: 0;padding: 0;}
 8         ul{
 9             width: 960px;
10             height: 300px;
11             border: 1px solid red;
12             margin: auto;
13             list-style: none;
14             overflow: hidden;
15         }
16         ul li{
17             width: 160px;
18             float: left;
19             transition: width 1s; 
20         }
      
       鼠标悬浮ul时,设置所有li宽度变小 21 ul:hover li{ 22 width: 100px; 23 }

        24 ul li:hover{鼠标悬浮当前li时,宽度变宽 25 width: 460px; 26 } 27 </style> 28 </head> 29 <body> 30 <ul> 31 <li><img src="video/images/ad1.jpg" alt=""></li> 32 <li><img src="video/images/ad2.jpg" alt=""></li> 33 <li><img src="video/images/ad3.jpg" alt=""></li> 34 <li><img src="video/images/ad4.jpg" alt=""></li> 35 <li><img src="video/images/ad5.jpg" alt=""></li> 36 <li><img src="video/images/ad6.jpg" alt=""></li> 37 </ul> 38 </body> 39 </html>

鼠标悬浮时效果图:

技术图片

CSS3——过渡模块——手风琴案例

标签:doctype   font   鼠标   oat   宽度   over   hidden   hover   案例   

原文地址:https://www.cnblogs.com/2020-2-12/p/12576400.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!