我有一个 div 里面移动另一个 div 。我需要停下来.block当我将鼠标悬停在当前位置时.container。怎么做？
HTML:
<div class="container">
<div class="block"></div>
</div>
CSS:
.container {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #000;
position: relative;
}
.block {
width: 100px;
height: 100px;
background: red;
position: absolute;
animation: move 2s linear infinite;
}
@keyframes move {
0% { left: 10px; }
25% { left: 50px; }
50% { left: 100px; }
75% { left: 50px; }
100% { left: 10px; }
}
DEMO http://jsfiddle.net/meh6on55/
你可以加
.block:hover
{
animation-play-state: paused;
}
当您将鼠标悬停在动画上时暂停动画。
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
