过渡效果小案例思路:section设宽高,div设宽高。加浮动。最右边的图超出section,加overflow。
鼠标滑动效果:所有div先同时变小,然后单击某一个div时图片放大
<section>
<div><img src="images/img1.jpg" alt=""></div>
<div><img src="images/img2.jpg" alt=""></div>
<div><img src="images/img3.jpg" alt=""></div>
<div><img src="images/img4.jpg" alt=""></div>
<div><img src="images/img5.jpg" alt=""></div>
</section>
section{
width: 800px;
height: 320px;
background: pink;
margin:0 auto;
overflow: hidden;
}
div{
width: 160px;
height: 320px;
float: left;
}
section:hover div{
width: 40px;
transition:1s;
}
section div:hover{
width: 640px;
}
做到最后,出现个小bug:偶尔有图会掉下来。这是因为section的宽度不够了,包不住所有浮动的图片。解决方案:在所有div外面再包一个article标签,只需设置宽,宽度要比section大,作为容器
最后的呈现的效果图如下: