视频地址：点此查看
今天我们来做这样一个效果，使用css让一个图片无限旋转，当然你也可以做其他动画，这里我们用到一个css的属性animation
我们先引入一张图片，并给他设置成圆形的，基础代码是这样的
img{
width: 100px;
height: 100px;
padding: 4px;
border-radius: 50%;
border: 3px solid skyblue;
}
<img src="./avatar.jpg" alt="">
最后效果是这样的
接下来我们使用关键帧的方式定义动画
@keyframes rotate {
form {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
这几行代码指的是，我们预设了一个名称为rotate的动画规则，从旋转角度为0度到旋转角度360度，也就是旋转一圈。
然后使用我们的css属性animation，我们先来看一下MDN上对animation属性的介绍，
developer.mozilla.org/zh-CN/docs/…
这里给我们介绍了animation是个复合属性，他所包含的属性有这些
animation-name 动画的名字，也就是我们预设的动画规则的名称
animation-duration 完成一个动画所需要的时间
animation-timing-function 动画节奏，它支持的值比较灵活，这里简单介绍几种，如果想详细了解的可以看一下mdn上对它的详细介绍
developer.mozilla.org/zh-CN/docs/…
- linear 从头到尾的速度是相同的
- ease 从低速开始，然后加快，在结束前变慢
- ease-in 从低速开始
- ease-out 从低速结束
- ease-in-out 从低速开始和结束
- ...
animation-delay 延迟多久开始动画
animation-iteration-count 动画执行的次数或者周期，当参数值为 infinite 时则表示无限循环
animation-direction 动画运行的方向，他有这些值
animation-fill-mode 动画执行之前和之后的样式
animation-play-state 控制动画运行状态
最终我们需要给img标签添加animation属性就可以实现最开始的动画，更多动画效果需要大家来探索
animation: rotate 3s infinite linear;
