本帖最后由 SZUI 于 2017-1-18 12:42 编辑
CSS3-简易手风琴
效果图：
步骤一：
写好结构；div是装这些图片的大容器。一定要用标签包住图片，不然待会要改CSS时，图片会发生变形
步骤二：
清除默认样式；给box盒子设置宽高，然后盒子上下间隔200px（为了好看），左右居中
步骤三：
给span标签也就是嵌套图片标签的盒子，设置宽高（不要给img设置宽高，会变形），设置一个3秒的过渡动画，都是左浮动。溢出隐藏必须要加上，因为此时span标签是20%的宽，但是img的宽有640px，肯定会超出父级给的宽，所以此时需要溢出隐藏。
步骤四：
让当前悬停状态下的span宽度变为80%；其余的变为5%（其余的是四张，加起来20%）
所有代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 - 简易手风琴</title> <style type="text/css"> *{ margin:0; padding:0; } .box{ width:800px; height:320px; margin:200px auto; } .box span { width:20%; height:320px; transition:all 3s; overflow:hidden; float:left; } div:hover span{ width: 5%; } div span:hover{ width: 80%; } </style> </head> <body> <div class="box"> <span><img src="1.jpg"></span> <span><img src="2.jpg"></span> <span><img src="3.jpg"></span> <span><img src="4.jpg"></span> <span><img src="5.jpg"></span> </div> </body> </html>
陈伟豪-CSS3-简易手风琴.zip
(853.35 KB, 下载次数: 57)
| 
收藏
淘帖
踩
