css部分
<style>
@-webkit-keyframes domove{
0%{
top:0;left:0;
}
25%{
top:0;left:300px;
}
50%{
top:300px;left:300px;
}
75%{
top:300px;left:0px;
}
100%{
top:0;left:0;
}
}
#wrap{width: 400px; height: 400px; border: 1px solid #000; position: relative; border: 5px solid #000;}
.box{width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; -webkit-animation: 4s domove infinite linear alternate;} //forwards: 把物体动画地从一个地方移动到另一个地方，并让它停留在那里
#wrap:hover .box{ -webkit-animation-play-state: paused;} //鼠标移入停止动画
</style>
效果图
转载请注明原文地址: https://www.6miu.com/read-36816.html
