2021-05-16

最新推荐文章于 2024-10-18 16:48:21 发布

富尔牛

最新推荐文章于 2024-10-18 16:48:21 发布

阅读量118

点赞数

分类专栏： CSS3 前端文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_42150764/article/details/116904053

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS3

3 篇文章 0 订阅

订阅专栏

两行CSS代码教你实现简单轮播、

先上图
在这里插入图片描述

像这种图片轮播效果，我们经常再某宝某站上能看到。那如何用最简单的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>

没错，就这么简单！

二、transform属性

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

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

这里就等同于translateX(-600px);表示当鼠标放到section元素上时，该元素水平移动-600px;
2. transition-duration,过渡动画所需要的时间，以秒或者毫秒为单位。后可以跟多个值，可配合transition-property设置不同属性的过渡时间。
transition-duration: 2s;
此处设置动画过渡时间为2s;
3. transition-timing-function,表示过渡动画速度曲线，这里我们只看其中一种步进函数steps()。
故名思意，它将整个的过渡过程，分成一帧一帧的变化。有两个参数(integer, [strat, end]),如
steps(2, start),表示整个过渡时间分成两步，并且立即执行。
当步长为1的时候，可以简写成step-start[end],这里轮播就写成
transition-timing-function: step-end;
表示步长为1，并且等待transition-duration的时间，然后执行动画。

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