先放效果圖吧
不是我寫出來的，也不是我找到的，我朋友找的這個東西，覺得炫酷，我研究了半天（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元素都添加動畫邊框效果
//頁面的作者和鏈接我不知道，我的是我朋友給我的，而且過了好久，這個是網頁內部的注釋，我標明一下出處（-.-）
