关于前端:简单CSS实现图片轮播效果

5次阅读

共计 1234 个字符，预计需要花费 4 分钟才能阅读完成。

先上图

像这种图片轮播成果，咱们常常再某宝某站上能看到。那如何用最简略的 CSS 代码实现这种成果呢？下方安顿

HTML 局部：
<body>

<main>
    <section>
        <div>
            <img
                src='http://i0.hdslb.com/bfs/feed-admin/98bb7f4c818adccd14cb69172c30f60578d43c86.jpg@880w_388h_1c_95q'>
        </div>
        <div>
            <img
                src="https://i0.hdslb.com/bfs/sycp/creative_img/202105/839cc38bfc9adf60e6dcbfd6906ba070.jpg@880w_388h_1c_95q">
        </div>
    </section>
</main>

</body>
CSS 局部：
<style>

    body {
        width: 100vw;
        height: 100vh;
    }

    main {
        width: 600px;
        overflow: hidden;
    }

    section {
        display: flex;
        width: 1200px;
        transition-duration: 2s;
        transition-timing-function: step-end;
    }

    section:hover {transform: translate(-600px);
    }

    div {width: 600px;}

    div img {width: 100%;}
</style>
没错，就这么简略！

translate，元素二维位移属性，其值能够是长度值或者百分比，能够有一到三个值不等。只有一个值的状况下，第二个值默认为 0。

section:hover {transform: translate(-600px);
}

这里就等同于 translateX(-600px); 示意当鼠标放到 section 元素上时，该元素程度挪动 -600px;

transition-duration, 过渡动画所须要的工夫，以秒或者毫秒为单位。后能够跟多个值，可配合 transition-property 设置不同属性的过渡工夫。
transition-duration: 2s;
此处设置动画过渡工夫为 2s;
transition-timing-function, 示意过渡动画速度曲线，这里咱们只看其中一种步进函数 steps()。
故名思意，它将整个的过渡过程，分成一帧一帧的变动。有两个参数 (integer, [strat, end]), 如
steps(2, start), 示意整个过渡工夫分成两步，并且立刻执行。
当步长为 1 的时候，能够简写成 step-start[end], 这里轮播就写成
transition-timing-function: step-end;
示意步长为 1，并且期待 transition-duration 的工夫，而后执行动画。

好了，以上就是 CSS 实现简略轮播成果的全部内容。喜爱的话，请点赞 + 评论！、

正文完