有意思的clip-path

princekin 發布于2019-08-21 16:48 / 3113人閱讀

摘要：我目前找不到很高效的轉化方式，就用標注軟件標注完后，手工錄入最后畫了個就結束了。或者你有很好的方式介紹，請一定要告訴我。

前段時間朋友介紹了一個很帥的網站 http://www.species-in-pieces.com/

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

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

Demo中的圖片來自 https://www.behance.net/tomanders, 我只是做了低邊處理

預覽地址: https://luosijie.github.io/ani-clipath/ 源碼地址: https://github.com/luosijie/ani-clipath 實現過程

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




  
  
  simple move

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

設計

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

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

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

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

碼起

代碼實現的基本思路是這樣的

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

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

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

區區幾行代碼就不貼出來了，感興趣的移步 github

不過我想介紹一下封裝好的插件的使用方法 安裝 CDN

shapes 屬性的數據格式

var data = [
 ?第 1 個低邊圖形
 ?[
 ? ?// 基本圖形參數
 ? ?{ 
 ? ? ?// 顏色
 ? ? ?c: "#1A1A1A",
 ? ? ?// polygon坐標
 ? ? ?p: [ { x: "50%", y: "30%" }, { x: "30%", y: "70%" }, { x: "70%", y: "70%" }]
    }
    ...
 ?],
 ?第 2 個低邊圖形
 ?[
    {
      c: "#E6E6E6",
      p: [ { x: "50%", y: "70%" }, { x: "30%", y: "30%" }, { x: "70%", y: "30%" }]
    }
    ...
  ]
  ...
 ?第 n 個低邊圖形
]

先這樣了歡迎star

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88750.html

[譯] 學習 CSS clip-path 屬性

摘要：整體來說網頁主要是由矩形所構成的，另一方面印刷品則具備相對多樣性。即便我們設定的元素不再是矩形，但周圍的元素排列方式仍然維持原本矩形的佈局。為了達成周圍的元素跟著裁切的形狀，我們可以使用屬性。周圍的元素仍需要靠來修正。整體來說網頁主要是由矩形所構成的，另一方面印刷品則具備相對多樣性。造成這樣差異的原因有很多，不過其中一個即是缺少合適的工具。這篇文章主要會介紹 clip-path 這...

yuanxin 2019-08-29 11:00 評論0 收藏0
CSS開發

摘要：譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關于是一款進行柵格布局的輔助工具，它讓開發者擺脫了冗雜的數學計算，同時降低了樣式與結構的耦合程度。【譯】CSS 十六進制顏色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃本文永久鏈接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 評論0 收藏0
使用CSS3的clip-path(裁剪路徑)實現剪貼區域的顯示以及實例實現圖片漸變

摘要：介紹直譯過來就是裁剪路徑，使用或形狀定義一個元素的可見區域的方法。想象一下你在中勾勒路徑的場景。上是這樣介紹的屬性可以防止部分元素通過定義的剪切區域來顯示，僅通過顯示的特殊區域。屬性代替了現在已經棄用的剪切屬性。clip-path介紹 clip-path 直譯過來就是裁剪路徑，使用SVG或形狀定義一個HTML元素的可見區域的方法。想象一下你在Photoshop中勾勒路徑的場景。MDN上是這樣...

番茄西紅柿 2019-04-23 11:44 評論0 收藏0
不可思議的CSS之clip-path

摘要：一個用來生成各種形狀包括隨意拖拉自定義并且可以直接生成代碼的網站。兼容性目前兼容性較差，和直接不支持，考慮兼容性的同學可以暫時等等。透明區域表示被裁剪的區域基本圖形定義一個矩形。語法說明可選，表示填充規則用來確定該多邊形的內部。本文首發于我的博客曾經和某位朋友在聊天中討論過這樣一個話題：綜合90%的網站的布局以及頁面中的元素不是方的，就是圓的。就像所有的顏色都是由三原色（RGB）...

walterrwu 2019-08-29 13:17 評論0 收藏0
CSS中clip-path屬性的使用

摘要：的使用值為多個坐標點組成，坐標第一個值是方向，第二個值是方向。值為橢圓的軸半徑，軸半徑，定位橢圓的坐標三部分組成。 clip-path的使用 polygon 值為多個坐標點組成，坐標第一個值是x方向，第二個值是y方向。左上角為原點，右下角是(100%,100%)的點。 body { background-color: #000; } .fa { border: 1px ...

KnewOne 2019-08-29 16:58 評論0 收藏0