clip-path动画分享
CSS样式的clip-path来源于SVG<clipPath>元素，它们的本质都是剪切
每个人都知道剪切，那么clip-path实现的剪切有什么特别之处呢？
它的剪切元素可以是任意对象
你整个HTML页面也好，一个form表单也好，图片也好，一切都可以变成一块一块的
在看效果之前先检查一个这个属性的浏览器兼容情况，如下图：
IE是完全不支持，尽量使用webkit内核，需要加上内核前缀-webkit-
好了，接下来就是栗子了，整片文章多图~
下面是一个资源管理器的静态页面
让我们对其简单的剪切下
变成了一个三角形，简单的一句话代码
| - webkit - clip - path : polygon ( 0 0 , 750px 0 , 750px 500px ) ; |
利用polygon多边形给出了三个点，画了一个三角形，也就是将整个图切割成了一个三角形
给多了的点的话就可以生成各种形状，比如四边形，五角星，六边形等等……
目前来说没有什么亮点，但是如果clip-path里面的数值变化可以触发transition的话那瞬间就不一样了
所以关于clip-path的大部分动画都是这样的，我给出一个简单的例子
本身效果是毫无卡顿感的，因为录制成gif希望文件较小所以帧间隔较大，显得比较卡
由于clip-path剪切出来的部分和正常的DOM节点其实是一样一样的，那么很多关于DOM节点的操作也可以给它加上，比如……
3D动画！
之前的长方形变成了一个三角形，如果是由一个长方形变成多个三角形呢，然后他们进行3D变化了呢？
下面是制作的一个简单的效果
这里我进行了3D变化，随机动态的改变其rotateXYZ、translate3D的值，如果实现确定好的话可以实现一些折纸啊，折叠之类的效果，在这里我就不演示了，道理说道就好
注意：经过clip-path剪切之后的元素，background-color和background-image同时使用会产生bug，会有边缘线产生，请单独使用它们！
分享一个动画献给AlloyTeam，毕竟是在这里的第一篇文！动画前半部分和后半部分都是使用clip-path实现的
由于动画时间较长，特地缩小了录制区域来避免文件过大，显得还是有点卡顿，真实情况下真的还好……
最后提一下毕竟利用clip-path频繁操作DOM，简单一点的还好，如果是特别复杂，或者像我这个动画里面碎图的块再多一点，那么就会卡到你抓狂
所以做动画还是Canvas大法好~那么下一篇文章确定了，还是动画，不过是Canvas相关
结语：整篇文章代码很少（就是没有代码……），没有把某个效果具体从开始第一秒到最后一秒具体去实现，因为clip-path本身不难，也不算什么新东西~有哪些属性值，怎么使用，网上一搜一大堆，我这里就不罗列了啊~如果有什么疑问大家一起交流吼吼~
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
