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动画时，要注意多加应用。