关于纯JS实现动态边框的理解

先放效果图吧

不是我写出来的，也不是我找到的，我朋友找的这个东西，觉得炫酷，我研究了半天（2333）

开始正题：

页面有6个图形，5个矩形，1个圆形,5个圆形是同样的方法实现，圆形是别的方法

先说圆形，圆形通过C3动画属性就已经全部实现了

 这个圆形边框转起来靠的是C3动画属性，通过伪元素选择符:before构建一个额外的元素，在设置边框属性之后，通过动画实现构建出来的元素的不停旋转。

        看起来是个边框一直在转动，实际上是一个大的正方形在不停的运动，仔细观察的话可以发现滚动条的高度忽高忽低，就是正方形元素的斜对角线的长度造成的。可以参考下图

 注意滚动条高度，我的鼠标是没有专门去控制页面的。

接着看矩形

矩形实现的方式是通过chrome浏览器自带的animate方法实现的，为了证实这一点，我在不同的浏览器上都做了测试

1、edge（edge只有圆形，也就是纯粹通过c3动画实现的才可以正常运行）

 2、firefox（火狐浏览器也是运行不了，全是问题）

3、ie（ie11，不能运行）

 4、safari（是的，你没看错，safari浏览器，整个页面只有下面这个东西）

5、360（360可以运行，因为360是Trident和chromium双内核）

 6、搜狗（搜狗可以运行，搜狗内核是chromium）

7、欧朋（如果欧朋还是使用presto内核的话估计也是不可以，但在几年前欧朋放弃了自己的presto内核选择了谷歌的webkit，后来又和谷歌一起开发blink，也算是webkit的分支）

 这是关于animate属性的一些资料

 开始实现

 首先将每个矩形的特点都划分出来，组成一个数组对象，如果有需要更改的，则单独列出

 然后进行模板的构建

 

如果什么都不需要进行修改的话，就参照这个模板就行

设置边框

将存放特点的数组对象与模板进行合并加工，构造不同的样式

参考圆形，将新元素的属性构造出来

计算元素自身的大小以及在新元素构建后应该占据的大小

 

计算关键帧样式

计算第二条边框的关键帧样式

animate属性的配置

 

 构造元素，样式，并进行分配

 

利用chrome的animate属性，实现动画

 

对双边框样式进行动画实现

 

最后将页面上的元素进行遍历，给每一个div元素都添加动画边框效果

 //页面的作者和链接我不知道，我的是我朋友给我的，而且过了好久，这个是网页内部的注释，我标明一下出处（-.-）