關於純JS實現動態邊框的理解
先放效果圖吧
不是我寫出來的,也不是我找到的,我朋友找的這個東西,覺得炫酷,我研究了半天(2333)
開始正題:
頁面有6個圖形,5個矩形,1個圓形,5個圓形是同樣的方法實現,圓形是別的方法
先說圓形,圓形通過C3動畫屬性就已經全部實現了
這個圓形邊框轉起來靠的是C3動畫屬性,通過偽元素選擇符:before構建一個額外的元素,在設置邊框屬性之後,通過動畫實現構建出來的元素的不停旋轉。看起來是個邊框一直在轉動,實際上是一個大的正方形在不停的運動,仔細觀察的話可以發現滾動條的高度忽高忽低,就是正方形元素的斜對角線的長度造成的。可以參考下圖
註意滾動條高度,我的鼠標是沒有專門去控制頁面的。
接著看矩形
矩形實現的方式是通過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元素都添加動畫邊框效果
//頁面的作者和鏈接我不知道,我的是我朋友給我的,而且過了好久,這個是網頁內部的註釋,我標明一下出處(-.-)
關於純JS實現動態邊框的理解