首页 > 代码库 > css手风琴

css手风琴

<style>
        .box{ width:  1000px; height: 450px; margin:0 auto; overflow: hidden;}
        .box div{ width: 20%;  float: left; transition: all 1s;}
        img{  width: 800px;}
     .box:hover div{ width: 5%; }
        .box div:hover{ width: 70%;}
    </style>
</head>
<body>
    <div class="box">
        <div><img src="http://www.jq22.com/demo/css3sfq20170111/img/1.png" alt=""></div>
        <div><img src="http://www.jq22.com/demo/css3sfq20170111/img/2.png" alt=""></div>
        <div><img src="http://www.jq22.com/demo/css3sfq20170111/img/3.png" alt=""></div>
        <div><img src="http://www.jq22.com/demo/css3sfq20170111/img/4.png" alt=""></div>
        <div><img src="http://www.jq22.com/demo/css3sfq20170111/img/5.png" alt=""></div>
        
    </div>

 

css手风琴