CSS手风琴效果

代码片段 1

<!DOCTYPE html>
<head>
    <meta charset=”gb2312″ />
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .img {
            width: 600px;
            height: 320px;
            background: #000;
        }
        .img1 {
            background: red;
        }
        .img2 {
            background: green;
        }
        .img3 {
            background: blue;
        }
        .img4 {
            background: orange;
        }
        .img5 {
            background: orangered;
        }
        #box {
            width: 805px;
            height: 320px;
            margin: 100px auto;
            overflow: hidden;
            box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
        }
        #box ul li {
            float: left;
            list-style: none;
            width: 160px;
            position: relative;
            -webkit-transition: all .7s;
            -moz-transition: all .7s;
            -ms-transition: all .7s;
            -o-transition: all .7s;
            border-left: 1px solid #ccc;
        }
        .title {
            color: #fff;
            font-size: 20px;
            width: 600px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            bottom: 0;
            left: 0;
            height: 50px;
            line-height: 50px;
        }
        #box:hover li {
            width: 50px;
        }
        #box li:hover {
            width: 600px;
        }
        .circle {
            position: absolute;
            width: 100px;
            height: 100px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 100%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id=”box”>
        <ul>
            <li>
                <a href=””><div class=”img1 img”></div></a>
                <div class=”title”>标题1</div>
            </li>
            <li>
                <a href=””><div class=”img2 img”></div></a>
                <div class=”title”>标题2</div>
            </li>
            <li>
                <a href=””><div class=”img3 img”></div></a>
                <div class=”title”>标题3</div>
            </li>
            <li>
                <a href=””><div class=”img4 img”></div></a>
                <div class=”title”>标题4</div>
            </li>
            <li>
                <a href=””><div class=”img5 img”></div></a>
                <div class=”title”>标题5</div>
            </li>
        </ul>
    </div>
</body>
</html>

1,主要知识点:
css3的transition属性,transition:all .65s;
rgba(0,0,0,0.5);
2,主要掌握计算盒子的总宽度和各个li的宽
800=600+4*50;
ul:hover li{width:50px;}
ul li:hover{width:600px;}
3,其他的效果我们可以自己发挥添加,比如字体,颜色,动画,其他的效果等,主要是把框架写出来

前端开发项目的视频|php和前端开发工具|前端开发相关技术

» 本文来自:前端开发者 » 《CSS手风琴效果》
» 本文链接地址:https://www.rokub.com/5240.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!