clip-path实现形状变换动画

时间：2023-03-30 19:30:21 CSS

clip-path的超级应用：http://species-in-pieces.com/1。一个简单的clip-path动画（最后抖动是因为gif没录好，不是动画问题）HTML

CSS.wrapper{width:500px;高度：500px；位置：相对；背景色：#f0f0f0；边距：自动；}.piece{位置：绝对；宽度：100%；高度：100%；左：0；右：0；顶部：0；底部：0；动画持续时间：3s；动画迭代计数：无限；动画方向：交替；动画延迟：1s；动画填充模式：两者；animation-timing-function:cubic-bezier(0.62,0.02,0.34,1);}.piece:nth-child(1){animation-name:move1;}.piece:nth-child(2){动画名称:move2;}.piece:nth-child(3){animation-name:move3;}.piece:nth-child(4){animation-name:move4;}@keyframesmove1{0%,10%{背景:#368AE4;剪辑路径：多边形（100px100px，200px100px，150px186.60px）；}90%,100%{背景:线性渐变(180deg,#368AE4,#e400c6);剪辑路径：多边形（150px150px，150px350px，250px250px）；}}@keyframesmove2{0%,10%{背景：#ff5500;剪辑路径：多边形（350px100px，300px186.60px，400px186.60px）；}90%,100%{背景:线性渐变(180deg,#ffaa7f,#4be47e);剪辑路径：多边形（150px150px，350px150px，250px250px）；}}@keyframesmove3{0%,10%{背景:#55007f;剪辑路径：多边形（100px300px，200px300px，150px386.60px）；}90%,100%{背景:线性渐变(180deg,#3401ff,#e46c09);剪辑路径：多边形（350px150px，350px350px，250px250px）；}}@keyframesmove4{0%,10%{背景:#7f1e6d;剪辑路径：多边形（350px300px，300px386.60px，400px386.60px）；}90%,100%{背景:线性梯度(180deg,#f4ff10,#dc60e4);剪辑路径：多边形（150px350px，350px350px，250px250px）；}}主要思想，每一块都是一个完整的填充最外层容器的div，使用clip-path绘制三角形，动画改变三角形的位置

上一篇：t-io3.7.5发布，口碑爆棚的国产网络编程框架

下一篇：前端面试日常3+1——Day887

clip-path实现形状变换动画相关文章