css轮播

css部分

.loop-wrap {    position: relative;    width: 500px;    height: 300px;    margin: 100px auto;    overflow: hidden;}.loop-images-container{    position: absolute;    left: 0; top: 0;    width: 500%; /* 横向排列 5张图片 宽度应为主容器5倍 */    height: 100%;    font-size: 0;}.loop-image{    width: 500px;    height: 300px;}.loop-images-container{    position: absolute;    left: 0; top: 0;    width: 500%;    height: 100%;    font-size: 0;    transform: translate(0,0); /* 初始位置位移 */    animation: loop 10s linear infinite;}/* 创建loop动画规则 *//*   轮播5张，总耗时10s，单张应为2s(20%)   单张切换动画耗时500ms，停留1500ms*/@keyframes loop {    0% {transform: translate(0,0);}    15% {transform: translate(0,0);} /* 停留1500ms */    20% {transform: translate(-20%,0);} /* 切换500ms 位移-20% */    35% {transform: translate(-20%,0);}    40% {transform: translate(-40%,0);}    55% {transform: translate(-40%,0);}    60% {transform: translate(-60%,0);}    75% {transform: translate(-60%,0);}    80% {transform: translate(-80%,0);}    95% {transform: translate(-80%,0);}    100% {transform: translate(0,0);} /* 复位到第一张图片 */}

html部分

<div class="loop-wrap" style="margin-left: 10px;width: 500px;">    <div class="loop-images-container">        <img src="002.png" alt="" class="loop-image">        <img src="003.png" alt="" class="loop-image">        <img src="002.png" alt="" class="loop-image">        <img src="001.png" alt="" class="loop-image">        <img src="002.png" alt="" class="loop-image">    </div></div>

src后面改成自己的图片。