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