黑马程序员技术交流社区

标题: 纯CSS3制作手风琴效果---出自深圳黑马中心 [打印本页]
作者: SZUI    时间: 2017-1-18 12:38
标题: 纯CSS3制作手风琴效果---出自深圳黑马中心
本帖最后由 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, 下载次数: 94)



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2