盒子源码分享阁关于css可以实现的动画效果有很多，本次盒子给大家分享一个用css完成的旋转动画效果，接下来就来看看吧！
在css中，可以利用animation属性来个元素绑定动画，animation属性可以控制动画时长和次数，语法为：
animation: name duration timing-function delay iteration-count direction;
其中：
其中属性的值设置为“infinite”时，规定动画无限次播放，当我们给元素绑定旋转动画时就能够一直旋转了。
再通过@keyframes规则设置动画的旋转动作。
代码结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>div{ width:100px; height:100px; background-color:pink; animation:fadenum 5s infinite; } @keyframes fadenum{ 100%{transform:rotate(360deg);} }</style>
</head>
<body>
<div></div>
</body>
</html>
效果图:
以上就是如何利用css完成旋转动画效果！大家可以去试一试，可以加在图片上，再做一些修饰就可以展现出更好看的效果！请大家多多关注
