巧用 CSS 实现炫彩三角边框动画

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475
最近有个小伙伴问我，在某个网站看到一个使用 SVG 实现的炫彩三角边框动画，问能否使用 CSS 实现：

很有意思的一个动画效果，立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画，非常的类似：

其核心就是利用了角向渐变（conic-gradient），然后将图案的中心区域通过覆盖遮罩一个小号的图形实现。

然而，这个三角形动画里有两个难点：

1. 整个图形是个三角形

在 CSS 中，我们可比较轻松的实现矩形与圆形，但是三角形这里无疑会棘手很多。

2. 整个边框还附带阴影，并且阴影还是在边框的两侧

这里看似不复杂，实则困难重重，如果采用上述的方法，将图案的中心区域通过覆盖遮罩一个小号的图形实现镂空，那么另外一侧的阴影如何产生？即便使用 drop-shadow，也会被覆盖的内侧图形给遮挡住。

当然，CSS 还是可以实现这个图形的，本文就将讲解如何使用 CSS 实现上述炫彩三角边框动画。

通过角向渐变实现主体动画

首先，我们还是需要借助角向渐变 conic-gradient 实现整个动画的主体。

<div>div>

@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;
    }
}

核心就仅仅只是一个角向渐变图案，配合 CSS @Property，让整个效果旋转起来：

当然