先来看一下要实现的东西

（本来是要插视频的，但是视频地址不支持，你就想设想一下，这个紫色的会转圈）

先来看一下html的代码非常简单：设置两个div就可以了：为什么要两个下面会讲到:

先为外面的div定位用到position：fixed，因为它是针对浏览器窗口定位的，在这里说明一下，用position：absolute也是可以的，因为他的父级元素就是body，并且为里面的div设置边框来现显示一个圆形，下面看一下代码：

opacity是一个设置透明度的属性，在这里可有可无

再往下讲之前先来了解一个选择器：（选择器：after）

这个选择器就是在选择器的后面插入新内容，举个栗子：（p:after）

<p>我是唐老鸭</p>

这是css代码，效果如下：

写这个图标这个选择器很重要，我们先来把静态的写出来,代码如下:

这个代码及时用了after选择器注意content是他的内容，在这里说明一下，这个position：absolute不太了解，或者说懂一点点说的不是特别明白，等我彻底了解之后再来详细解释它

到这里主要的内容来了:就是如何实现动态的效果，其实也蛮简单的，先来看一下代码：

有两个属性：第一个animation，他有6个属性，先来一张概括图：

也可以使用像上面代码那样的简写属性

要说明一下的是：

第三个，描述动画的速度，有以下几个值分别代表意思：

第六个，动画完成时恢复原状是否按照设置的css样式完成：normal代表正常返回，也是默认值，alternate代表按照反向播放。

下来说明keyframes属性：from==0%，to==100%（分别代表动画的开始和结束）

里面的属性transfrom也有很多属性：translate，scale，rotate，skew，（他们都分2D3D）在这里用到了rotate。

translate（x,y,z）：xyz值有点像margin，指的是将盒子左右设置多少空间；(px)

scale（x,y）:指的是将盒子长宽分别放大多少倍；(px)

totate（度）:指的是将盒子旋转的角度；(deg)

skew（x,y）：指的是将盒子沿x,y轴旋转多少度(deg)。

再来看一下完整的代码：