一张雪碧图,
![](https://i-blog.csdnimg.cn/blog_migrate/0ba6e7fd4e9dc417b14fe039dc069a5c.png)
<div class="banner">
<div class="banner1">
<img src="img/*****.png" alt="">
<!-- 图片为雪碧图 -->
</div>
</div>
* {
padding: 0%;
margin: 0%;
}
.banner {
width: 218.3px;
height: 200px;
overflow: hidden;
}
.banner1 {
width: 655px;
height: 200px;
animation: ban 3s steps(3) infinite;
}
.banner1:hover{
animation-play-state: paused;
/* 动画开始状态animation-play-state*/
/* 动画暂停paused,就是说鼠标放上去暂停动画 */
/* 动画running 鼠标放上去执行,这个配合一开始的暂停paused使用在上面animation里面的值写入即可 */
}
.banner1 img {
width: 100%;
}
@keyframes ban {
0% {
margin-left: 0%;
}
100% {
margin-left: -655px;
}
}