使用过渡效果制作小案例

过渡效果小案例思路：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大，作为容器

最后的呈现的效果图如下：

转载于:https://www.cnblogs.com/web-learning/p/10273515.html