今日完成:

之前任务中轮播图使用的是bs框架的组件
然后今天试着用css来做一下
使用纯css实现轮播图的功能：
先讲一下思路， 要让图片轮流展示，并带有动画效果
这让我想起了小时候玩的一个玩具：万花筒。
从一个小窗口看进去，有精美的图片，旋转之后图片会切换。
类似一个暗箱的东西，当然万花筒的关键其实是光的折射啦，但它还是有一个图片切换的，
让人感觉里面好像藏着大千世界，花花绿绿的。但玩久了就会发现，其实就那几张图，来来回回的切换。这不就是轮播图吗
所以轮播图关键的几个点：
一个固定大小视窗（与图片大小相同），一个放值图片的容器（存放所有图片，图片并排放置）。
接下来把图片容器在视窗中移动就好了，超出视窗外的内容隐藏掉就好了（overflow:hidden）,每次移动的距离等于一张图片的宽度，给移动这一动作加上时间，
动画这块时间点是需要自己计算一下的，移动的时间，显示的时间（也就是固定不动）

贴一下代码：

<div class="loop-wrap">
    <div class="loop-images-container">
        <img src="../img/banner_02.jpg" alt="." class="loop-image">
        <img src="../img/banner3.png" alt="." class="loop-image">
        <img src="../img/banner4.jpeg" alt="." class="loop-image">
        <img src="../img/banner5.png" alt="." class="loop-image">
        <img src="../img/banner_02.jpg" alt="." class="loop-image">
    </div>
</div>

/*banner---轮播图*/
.loop-wrap {
    position: relative;
    /*width: 100px;*/
    padding: 15%;
    overflow: hidden;
}

.loop-images-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 500%;
    /*height: 100%;*/
    animation: loop 10s linear infinite;
    transform: translate(0,0);
    font-size: 0;
}

@keyframes loop {
    0% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-20%, 0);
    }
    45% {
        transform: translate(-20%, 0);
    }

    50% {
        transform: translate(-40%, 0);
    }

    70% {
        transform: translate(-40%, 0);
    }

    75% {
        transform: translate(-60%, 0);
    }
    95% {
        transform: translate(-60%, 0);
    }

    100% {
        transform: translate(-80%, 0);
    }

}

.loop-image {
    width: 20%;
    height: 100%;
}

/*banner---轮播图     end*/

效果图：

明日计划：

完成任务十五

遇到得问题：

无

收获:

无