手风琴效果 transition使用

作者: 一Left一 | 来源:发表于2018-09-12 19:27 被阅读3次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            list-style: none;
            width: 960px;
            height: 300px;
            border: 1px solid seagreen;
            margin: 90px auto;
            overflow: hidden;
        }
        ul li{
            float: left;
            width: 160px;
            height: 300px;
            /*添加动画效果*/
            transition: all 0.3s;
        }
        /*所有的li都变小*/
        ul:hover li{
            width: 60px;
        }
        /*当前的li变大*/
        ul li:hover{
            width: 600px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><img src="images/ad1.jpg" alt=""></li>
            <li><img src="images/ad2.jpg" alt=""></li>
            <li><img src="images/ad3.jpg" alt=""></li>
            <li><img src="images/ad4.jpg" alt=""></li>
            <li><img src="images/ad5.jpg" alt=""></li>
            <li><img src="images/ad6.jpg" alt=""></li>
        </ul>

    </div>
</body>
</html>