先放效果图吧
不是我写出来的，也不是我找到的，我朋友找的这个东西，觉得炫酷，我研究了半天（2333）
开始正题：
页面有6个图形，5个矩形，1个圆形,5个圆形是同样的方法实现，圆形是别的方法
先说圆形，圆形通过C3动画属性就已经全部实现了
注意滚动条高度，我的鼠标是没有专门去控制页面的。
接着看矩形
矩形实现的方式是通过chrome浏览器自带的animate方法实现的，为了证实这一点，我在不同的浏览器上都做了测试
1、edge（edge只有圆形，也就是纯粹通过c3动画实现的才可以正常运行）
2、firefox（火狐浏览器也是运行不了，全是问题）
3、ie（ie11，不能运行）
4、safari（是的，你没看错，safari浏览器，整个页面只有下面这个东西）
6、搜狗（搜狗可以运行，搜狗内核是chromium）
7、欧朋（如果欧朋还是使用presto内核的话估计也是不可以，但在几年前欧朋放弃了自己的presto内核选择了谷歌的webkit，后来又和谷歌一起开发blink，也算是webkit的分支）
这是关于animate属性的一些资料
开始实现
首先将每个矩形的特点都划分出来，组成一个数组对象，如果有需要更改的，则单独列出
然后进行模板的构建
如果什么都不需要进行修改的话，就参照这个模板就行
设置边框
将存放特点的数组对象与模板进行合并加工，构造不同的样式
参考圆形，将新元素的属性构造出来
计算元素自身的大小以及在新元素构建后应该占据的大小
计算关键帧样式
计算第二条边框的关键帧样式
animate属性的配置
构造元素，样式，并进行分配
利用chrome的animate属性，实现动画
对双边框样式进行动画实现
最后将页面上的元素进行遍历，给每一个div元素都添加动画边框效果
//页面的作者和链接我不知道，我的是我朋友给我的，而且过了好久，这个是网页内部的注释，我标明一下出处（-.-）
原文：https://www.cnblogs.com/asablog/p/10878297.html