两行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;
- 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实现简单轮播效果的全部内容。喜欢的话，请点赞+评论！、
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。