前端开发纯CSS3手风琴效果

前端开发人员和后端开发人员|改行做前端开发,简历怎么写|前端开发网上简历

代码片段 1

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发常用CSS3小技巧</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            padding: 100px;
        }
        li {
            list-style-type: none;
        }
        ul {
            width: 600px;
            height: 250px;
            overflow: hidden;
        }
        li {
            float: left;
            width: 120px;
            -webkit-transition: width 0.5s ease-out;
            -moz-transition: width 0.5s ease-out;
            -ms-transition: width 0.5s ease-out;
            -o-transition: width 0.5s ease-out;
            transition: width 0.5s ease-out;
        }
        li:hover {
            width: 400px;
        }
        ul:hover li:not(:hover) {
            width: 50px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href=”#”>
                <img src=”http://www.w3cfuns.com/data/attachment/album/201510/01/152251xjl7tlzqa020rql9.jpg” alt=”” />
            </a>
        </li>
        <li>
            <a href=”#”>
                <img src=”http://www.w3cfuns.com/data/attachment/album/201510/01/152251g50wjoh2tdb9970d.jpg” alt=”” />
            </a>
        </li>
        <li>
            <a href=”#”>
                <img src=”http://www.w3cfuns.com/data/attachment/album/201510/01/152251wri37jlnonxtnp9s.jpg” alt=”” />
            </a>
        </li>
        <li>
            <a href=”#”>
                <img src=”http://www.w3cfuns.com/data/attachment/album/201510/01/152251h3r4kgegxb3v4wo5.jpg” alt=”” />
            </a>
        </li>
        <li>
            <a href=”#”>
                <img src=”http://www.w3cfuns.com/data/attachment/album/201510/01/152252y1miroxozoyr4i4r.jpg” alt=”” />
            </a>
        </li>
    </ul>
</body>
</html>

webgis前端开发人员|前端开发从哪里下载素材|前端开发ui

赞(0)
前端开发者 » 前端开发纯CSS3手风琴效果
64K

评论 抢沙发

评论前必须登录!