1 前言
在css中我们可以利用@keyframes创建动画效果，在过程中还可更改css样式。
2 方法
先在position进行定位，animation设置动画运行的时长，infinite表示动画循环。在@keyframes中，比如0%，指在这个时间所处的位置，用top和left进行位置设置，可以利用这个“%”来调整动画的速度。若想对动画中的盒子进行更多的颜色样式设置，在对应的“%”后加上background即可。
3 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 500px;
height: 500px;
border: 4px solid red;
margin: 100px auto;
position: relative;
}
#box div{
width: 100px;
height: 100px;
background: #000000;
position: absolute;
left: 0;
top: 0;
/*transition: 1s;
*/animation: 4s ?grape ease infinite;
}
@keyframes grape{
0%{
left: 0;
top: 0;
}
25%{
left: 400px;
top: 0px;
}
50%{
left: 400px;
top: 400px;
}
75%{
left: 0;
top: 400px;
}
100%{
left: 0;
top: 0;
}
}
/* #box:hover div{
left: 400px;
top: 400px;
} */
</style>
</head>
<body>
<div id="box">
<div></div>
</div>
</body>
</html> |
4 结语
本次只展示了一个路径较为简单的基础动画，在之后的学习中，将会制作更为有趣的路径动画。在实现css动画时，要注意多加应用。
实习编辑：王晓姣
稿件来源：深度学习与文旅应用实验室（DLETA）