幻灯片（基于CSS3动画animation）

效果预览：

实现思路：
类似于：h5+css3+js之移动端轮播图
将存放所有图片的容易按照一定的时间在X轴进行移动，但是此处使用的是纯CSS实现，利用动画animation定义每一帧的动画，在每一帧的动画中沿着X轴进行移动
实现代码：
html:

    <main>
        <section>
            <div>
                <img src="/images/1.jpg" alt="">
            </div>
            <div>
                <img src="/images/2.PNG" alt="">
            </div>
            <div>
                <img src="/images/4.jpg" alt="">
            </div>
            <div>
                <img src="/images/dog.jpg" alt="">
            </div>
<!--            图片索引-->
        </section>

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </main>

css

* {
    padding: 0;
    margin: 0;
}

body {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template: 1fr/1fr;
    justify-items: center;
    align-items: center;
    background: #353b48;
}


main {
    width: 400px;
    height: 200px;
    overflow: hidden;
    position: relative;
}

/*存放所有图片 控制整体图片的移动*/
section {
    width: 1600px;
    height: 200px;
    display: grid;
    grid-template: 1fr/repeat(4,1fr);
    animation-name: move;
    animation-duration: 4s;
    /*每张图占1s 且等1s结束之后再移动*/
    animation-timing-function: steps(4,end);
    /*重复播放*/
    animation-iteration-count: infinite;
    position: relative;
}

div {
    width: 400px;
    height: 200px;
}

img {
    width: 100%;
}


ul {
    width: 200px;
    list-style-type: none;
    position: absolute;
    color: #fff;
    bottom: 0;
    display: grid;
    grid-template: 1fr/repeat(4,1fr);
    z-index: 2;
}

ul li {
    background-color: rgba(0,0,0,.5);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    grid-template: 1fr/1fr;
    justify-items: center;
    align-items: center;
    position: relative;
}

ul li:first-child::after {
    content: "";
    width: 30px;
    height: 30px;
    background-color: #e84118;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    animation-name: move_li;
    animation-duration: 4s;
    animation-timing-function: steps(4,end);
    animation-iteration-count: infinite;
}

section:hover,section:hover+ul>li::after{
    animation-play-state: paused;
}

@keyframes move {
    to {
        transform: translateX(-1600px);
    }
}

/*小圆点动画*/
@keyframes move_li {
    to {
        transform: translateX(200px);
    }
}