两行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属性

  1. translate，元素二维位移属性，其值能够是长度值或者百分比，能够有一到三个值不等。只有一个值的状况下，第二个值默认为0。
section:hover {  transform: translate(-600px);}

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

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

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