您的位置：首页 > Web前端 > CSS

css3实现的手风琴效果

2017-03-16 15:42 405 查看
利用css3的transition和nth-child实现手风琴

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{margin:0;padding: 0;}

        div{width: 780px;height: 200px;overflow: hidden;margin:50px auto;}

        ul{width: 780px;height: 200px;}

        li{float: left;width: 130px;list-style: none;transition:all .4s .01s linear;}

        ul:hover li{width: 100px;}

        li:nth-child(1):hover{width: 280px;}

        li:nth-child(2):hover{width: 280px;}

        li:nth-child(3):hover{width: 280px;}

        li:nth-child(4):hover{width: 280px;}

        li:nth-child(5):hover{width: 280px;}

        li:nth-child(6):hover{width: 280px;}

    </style>

</head>

<body>

<div>

    <ul>

        <li><img src="img/1.jpg"></li>

        <li><img src="img/2.jpg"></li>

        <li><img src="img/3.jpg"></li>

        <li><img src="img/4.jpg"></li>

        <li><img src="img/5.jpg"></li>

        <li><img src="img/6.jpg"></li>

    </ul>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3 web前端 前端 鼠标 图片
相关文章推荐
新的分享
章节导航