关于前端:巧用-CSS-实现炫彩三角边框动画

82次阅读

共计 4471 个字符，预计需要花费 12 分钟才能阅读完成。

最近有个小伙伴问我，在某个网站看到一个应用 SVG 实现的炫彩三角边框动画，问是否应用 CSS 实现：

很有意思的一个动画成果，立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画，十分的相似：

其外围就是利用了角向突变（conic-gradient），而后将图案的核心区域通过笼罩遮罩一个小号的图形实现。

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

  1. 整个图形是个三角形

在 CSS 中，咱们可比拟轻松的实现矩形与圆形，然而三角形这里无疑会辣手很多。

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

这里看似不简单，实则困难重重，如果采纳上述的办法，将图案的核心区域通过笼罩遮罩一个小号的图形实现镂空，那么另外一侧的暗影如何产生？即使应用 drop-shadow，也会被笼罩的内侧图形给遮挡住。

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

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

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

<div></div>
@property --angle {
  syntax: '<angle>';
  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，让整个成果旋转起来：

当然，如果这里感觉 CSS @Property 不好了解或者放心兼容性问题，能够替换成利用伪元素实现同样的图形，而后进行 transform: rotate() 旋转，成果一样。

基于矩形图形失去三角形

OK，接下来，咱们须要基于矩形图形失去三角形图形，对于外圈的三角形，咱们能够通过 clip-path 切割失去，也十分的简略：

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

即可失去如下成果：

这样，咱们就失去了一个实心的三角形。接下来须要先方法把外部给掏空。

最简略的思路就是，通过叠加一个小一号的图形在两头，色彩和背景色统一即可：

残缺的代码你能够戳这里 — CodePen Demo — Pure CSS Linear Triangle

然而，这样做有两个致命问题：

  1. 如果背景色不是实色而是渐变色，这个办法就生效了
  2. 这个办法实现的三角形边框内侧无奈增加暗影成果

这两个缺点都是不可承受的，所以咱们必须寻找真正可能镂空两头的形式，镂空实现后，它的核心得是通明的。

因而，这里咱们得应用 mask。

不过应用 mask 基于这样一个图形再实现一个小一号的三角形是比拟麻烦的，咱们相当于要实现这样一个镂空三角形图形，示意图如下：

这样一个图形，配合 clip-path，就能失去一个三角形边框图形，啥意思呢，我这里制作了一个动图示意：

右边是利用 mask 实现遮罩后的图形，左边是利用 clip-path 切割后的图形，它们的成果叠加在一起，就能实现一个边框三角形。

当然，这里须要对 mask 把握的比拟深刻，要应用 mask 切割一个外部镂空的三角形示意图如下：

OK，残缺的代码是这样：

@property --angle {
  syntax: '<angle>';
  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%));
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
    mask: 
        linear-gradient(117deg, #000 55%, transparent 55%, transparent),
        linear-gradient(-117deg, #000 55%, transparent 55%, transparent),
        linear-gradient(#000, #000);
    mask-position: 0 0, 130px 0, 0 250px;
    mask-size: 130px 250px, 130px 250px, 100% 10px;
    mask-repeat: no-repeat;
    animation: rotate 3s infinite linear;
}

@keyframes rotate {
    to {--angle: 360deg;}
}

咱们就失去了一个外部镂空的三角形边框了：

利用 drop-shadow 增加上光影

最初一步就比较简单了，因为上述三角形曾经是一个镂空图形，这里间接应用 drop-shadow 给元素加上一层光影成果即可，不过因为应用了 clip-path，间接在原元素上增加的 drop-shadow 无奈展现，这个好解决，咱们只须要多套一层构造，将 drop-shadow 增加到父元素上即可：

<div class="g-container">
    <div class="g-triangle"></div>
</div>
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.g-container {
    width: 260px;
    height: 260px;
    filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%));
}
.g-triangle {
    width: 260px;
    height: 260px;
    background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
    mask: 
        linear-gradient(117deg, #000 55%, transparent 55%, transparent),
        linear-gradient(-117deg, #000 55%, transparent 55%, transparent),
        linear-gradient(#000, #000);
    mask-position: 0 0, 130px 0, 0 250px;
    mask-size: 130px 250px, 130px 250px, 100% 10px;
    mask-repeat: no-repeat;
    animation: rotate 3s infinite linear;
}
@keyframes rotate {
    to {--angle: 360deg;}
}

这里又是一个小技巧，drop-shadow 是能够反复增加多个的，这里增加的两个暗影色彩就是 conic-gradient() 里设置的色彩，最终，咱们就失去了题图所示成果：

残缺的代码你能够戳这里 — CodePen Demo — Pure CSS Glowing Triangle

应用 clip-path 剪切环形三角形

下面利用了 clip-path 剪切外三角形，mask 镂空内三角形，经揭示，其实 clip-path 能够单独裁剪出一个环形三角形。

上述代码也能够简化成：

<div class="g-container">
    <div class="g-triangle"></div>
</div>
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.g-container {
    width: 260px;
    height: 260px;
    filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%));
}
.g-triangle {
    width: 200px;
    height: 200px;
    clip-path: 
        polygon(
        50% 0%,
        0% 100%,
        8% 100%,
        50% 15%,
        88% 93%,
        7% 93%,
        7% 100%,
        100% 100%
    );
    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;}
}

成果一样：

残缺的代码你能够戳这里 — CodePen Demo — Pure CSS Glowing Triangle

这里有必要解说一下，应用 clip-path 切割一个环形图案，是能够做到的。假如，咱们须要一个正方形环形，其点程序如下：

{clip-path: polygon(0% 0%,0% 100%,25% 100%,25% 25%,75% 25%,75% 75%,25% 75%,14% 100%,100% 100%,100% 0%);
}

即可失去：

同理，须要失去一个三角形环形，只须要 7 个点即可：

{clip-path: polygon(50% 0%,0% 100%,13% 100%,50% 20%,85% 90%,8% 90%,8% 100%,100% 100%);
}

成果如下：

这里有个很好用的工具，辅助制作 clip-path 图形，感兴趣能够试下：CSS clip-path Editor

最初

理解上述残缺代码，你可能还须要补齐一些根底 CSS 常识，能够按需点进去理解：

  • clip-path：微妙的 CSS shapes(CSS 图形)
  • CSS @property 自定义属性：CSS @property，让不可能变可能
  • 利用 drop-shadow 生成不规则图形的光源及边框: 妙用 drop-shadow 实现线条光影成果

好了，本文到此结束，心愿本文对你有所帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

正文完
前端
发表至： 前端
2022-03-03
 0
关于前端:Docker-redis集群部署实战
关于前端:Vue-2x源码学习render方法模板解析和依赖收集
关于前端:写个JS深拷贝面试备用
关于前端:Chrome-插件特性及实战场景案例分析