有意思的clip-path

princekin 发布于2019-08-21 16:48 / 3112人阅读

摘要：我目前找不到很高效的转化方式，就用标注软件标注完后，手工录入最后画了个就结束了。或者你有很好的方式介绍，请一定要告诉我。

前段时间朋友介绍了一个很帅的网站 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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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