之前碰到了个老朋友，聊起来发现他对svg三角边框动态图特别感兴趣，还打算自己学用css弄出来。这个动画真的超赞，突然让我想起那篇讲css边框动画的文章，真的很像！那么今天我们就来聊聊怎么用css做这个很酷的三角边框动态效果，说不定就能学到些新知识~
利用角向渐变实现主体动画
首先，咱们用角向渐变conic-gradient，就能轻松做出动画形状了接着，就在网页上加个@Property属性，这样它就会动起来要是觉得CSS @Property有点难理解，担心兼容问题的话，也没关系，咱们还能用伪元素来模仿这个形状，只要transform:rotate()搞一下，说不定也能达到同样的效果~
基于矩形图形得到三角形
@property --angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
div {
width: 260px;
height: 260px;
background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
animation: rotate 3s infinite linear;
}
@keyframes rotate {
to {
--angle: 360deg;
}
}
接着，咱们要把矩形换成三角形了。外头那个三角形用剪切路径就能轻松解决，不难？里面那部分需要挖空的话，就在中间加些乱七八糟的东西，使其跟背景的颜色相匹配即可。
寻找真正能够镂空中间的方式
div {
width: 260px;
height: 260px;
background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
animation: rotate 3s infinite linear;
+ clip-path: polygon(0 100%, 100% 100%, 50% 0);
}
其实，要做出中间镂空的图形真的不简单！最简单的办法就是用个小图盖在大图上面，但这样中间的部分就看不见了。看看这里，用mask和clip-path配合起来，就能轻松划出中间空白的三角形。
利用drop-shadow添加光影
做完那个三角形镂空图案以后别忘了加点影子效果，不然看起来会没那么立体。但是注意，要用clip-path切出的形状来添加，可不是乱来的。那咱们再新建一层，然后把影子效果放在容器上面。记住，只要有位置放，咱都能控制影子效果的位置和大小啦～
使用clip-path剪切环形三角形
哦对了，clip-path可不仅仅是能随便剪外头的三角形或者里头的那些玩意儿人家还能帮咱们把图形剪成环绕的三角形！要剪出圆形的话其实也不难，弄清楚几个要点就好了。比如说，要用这个神奇的工具剪一个环绕的三角形，只需要用上7个点就OK~
不用怕！只要明白每个环节，掌握好CSS那些个神奇属性和技巧，哪怕是复杂的边框动效也是小菜一碟了！
。
评论0