CSS图片流动轮播效果动画鼠标hover后暂停动画

 举个栗子：

<!--轮播图-->
<div class="carousel">
    <div class="imgList">
        <img src="index/images/home/carousel1.png"/>
        <img src="index/images/home/carousel2.png"/>
        <img src="index/images/home/carousel3.png"/>
        <img src="index/images/home/carousel4.png"/>
        <img src="index/images/home/carousel5.png"/>
        <img src="index/images/home/carousel6.png"/>
        <img src="index/images/home/carousel1.png"/>
        <img src="index/images/home/carousel2.png"/>
        <img src="index/images/home/carousel3.png"/>
        <img src="index/images/home/carousel4.png"/>
        <img src="index/images/home/carousel5.png"/>
        <img src="index/images/home/carousel6.png"/>
    </div>
</div>

 注意看图片：图片这里最好是准备两组一模一样的图片这样轮播滚动时就不会有间断↑↑↑↑↑↑↑（这个问题取决于你图片的多少，是否能够占满你所设置的div class="carousel"的宽度，然后相对应的计算@keyframes 里的滚动位置就可以了）

css：

/*轮播图*/
.carousel{
    width: 800px;//这里宽、高可以设置百分比
    height: 240px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border: 1px solid pink;
}
.carousel .imgList{
    //这里不用设置宽度，让宽度根据图片的多少，去自适应宽度
    height: 100%;
    animation: rolling 30s linear infinite;//调整滚动动画播放时间
    position: absolute;
    display: flex;
}
.carousel .imgList:hover{
    cursor: pointer;
    animation-play-state:paused;//滚动动画暂停
}
.carousel .imgList img{
    width: 288px;
    height: 100%;
    float: left;
    margin-right: 30px;
}
@keyframes rolling {
    from {
        transform: translateX(0);//调整滚动内容位置（开始）
    }
    to {
        //这里设置-50%因为是准备了两组一模一样的图片并且没有设置宽度，所以这里只需要滚动到中间的位置就可以了所以设置-50%
        transform: translateX(-50%);//调整滚动内容位置（结束）
    }
}