今天逛下大前端发现一个好玩的东西,用css3做动画我们已经玩过很多次了吧,结果居然还可以暂停这动画,这是之前没有运到过的,话不多说上代码。
- 首先上html代码(对就只要一个div)
<div class="play-state">
暂停
</div>
2.给play-state加上样式(目前这个的效果是在鼠标移上去时停止的)
.play-state {
width: 100px;
height: 100px;
margin: 40px;
text-align: center;
line-height: 94px;
border: 3px solid #e1efde;
border-radius: 50%;
animation: play-state 3s linear infinite;
cursor: pointer;
}
.play-state:hover {
animation-play-state: paused;
}
@keyframes play-state {
0% {
margin-left: 0;
}
100% {
margin-left: 200px;
}
}
w3school官网(animation-play-state:paused;)参数对应的地址
转发来自大前端原文章链接