recherche

Maison >interface Web >tutoriel CSS >Guidez-vous étape par étape pour créer une animation de bordure triangulaire colorée à l'aide de CSS

Guidez-vous étape par étape pour créer une animation de bordure triangulaire colorée à l'aide de CSS

青灯夜游
青灯夜游avant
2022-10-19 19:27:162025parcourir

Guidez-vous étape par étape pour créer une animation de bordure triangulaire colorée à l'aide de CSS

Un ami m'a récemment demandé que j'avais vu une animation de bordure triangulaire colorée implémentée en utilisant SVG sur un site Web et m'a demandé si je pouvais utiliser CSS pour y parvenir :

C'est un effet d'animation très intéressant immédiatement. m'a rappelé l'animation de bordure que j'ai présentée dans l'article CSS Wonderful Border Animation, qui est très similaire :

Le noyau est l'utilisation du dégradé angulaire (conic-gradient), et recouvrez ensuite la zone centrale du motif avec un petit graphique. conic-gradient），然后将图案的中心区域通过覆盖遮罩一个小号的图形实现。

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

  • 整个图形是个三角形

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

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

这里看似不复杂，实则困难重重，如果采用上述的方法，将图案的中心区域通过覆盖遮罩一个小号的图形实现镂空，那么另外一侧的阴影如何产生？即便使用 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

但是，这样做有两个致命问题：

  • 如果背景色不是实色而是渐变色，这个方法就失效了

  • 这个方法实现的三角形边框内侧无法添加阴影效果

这两个缺陷都是不可接受的，所以我们必须寻找真正能够镂空中间的方式，镂空完成后，它的中心得是透明的。

因此，这里我们得使用 mask。

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

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

左边是利用 mask 实现遮罩后的图形，右边是利用 clip-path

Cependant, il y a deux difficultés dans cette animation triangulaire :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html Property 伪元素 transform https
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Style CSS pur : style de barre de défilement très utileArticle suivant：Style CSS pur : style de barre de défilement très utile

Articles Liés

Voir plus