Maison >interface Web >tutoriel CSS >Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et d'ombre en ligne.

Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et d'ombre en ligne.

青灯夜游
青灯夜游avant
2021-10-08 19:00:003676parcourir

Cet article présentera une méthode d'utilisation du filtre CSS drop-shadow() pour ajouter des effets d'ombre à des parties d'éléments HTML et des éléments SVG afin d'obtenir un effet d'ombre et de lumière sympa dans une variété de scénarios différents. .
drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴影效果,以实现一种酷炫的光影效果,用于各种不同的场景之中。

Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et d'ombre en ligne.

通过本文,你可以学到:

  • 如何利用 filter: drop-shadow() 对元素的部分内容添加单重及多重阴影,以及利用多重阴影实现 Neon 效果

  • HTML 元素配合 filter: drop-shadow() 以及 SVG 元素配合 filter: drop-shadow() 生成的光影效果

使用 WebGL 实现的线条光影 Neon 动画

某天在逛 CodePen 的时候,发现了一个非常有意思的,使用 WebGL 实现的线条光影效果 -- NEON LOVE,非常的有意思:

Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.

但是由于源代码是使用 WebGL 完成,绘制如此简单的一个效果,通过 GLSL 着色器等代码,接近了 300 行。

那么,我们能否使用 HTML(SVG)+CSS 实现它呢?

利用 drop-shadow 对元素的部分内容添加单重及多重阴影

首先,要实现上述效果,很重要的一步是给元素的部分内容添加上阴影。

假设我们有这样一个图形:

<div></div>

我们给这个 div 图形设置 border-radius: 50%,并且添加一个 border-top

div {
    width: 200px;
    height: 200px;
    border-top: 5px solid #000;
    border-radius: 50%;
}

结果如下:

Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.

如果我希望,仅仅只给这个圆弧添加阴影,尝试使用 box-shadow

div {
    width: 200px;
    height: 200px;
    border-top: 5px solid #000;
    border-radius: 50%;
  + box-shadow: 0 0 5px #000;
}

emm,明显是不行的,阴影会加给整个 div:

Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.

为了解决这种情况,聪明的同学会立马想到 filter: drop-shadow(),它就是为了解决这个问题而诞生的,box-shadow 属性在元素的整个框后面创建一个矩形阴影, 而 drop-shadow() 过滤器则是创建一个符合图像本身形状(alpha 通道)的阴影。

好,我们使用 drop-shadow() 替换 box-shadow

div {
    width: 200px;
    height: 200px;
    border-top: 5px solid #000;
    border-radius: 50%;
  - box-shadow: 0 0 5px #000;
  + filter: drop-shadow(0 0 5px #000);
}

这样,我们就能得到符合图像本身形状(alpha 通道)的阴影:

Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.

并且,drop-shadow() 也可以对一个图像作用多次,实现类似阴影的多重阴影效果:

div {
    ...
    filter: 
        drop-shadow(0 0 2px #000)
        drop-shadow(0 0 5px #000)
        drop-shadow(0 0 10px #000)
        drop-shadow(0 0 20px #000);
}

我们将得到可见部分图案的多重阴影叠加效果:

Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.

我们将上述例子的黑白颜色对换一下,就能得到一副很有意境的图案,像是在深邃的太空中看某个透光的星球般:

Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.

CodePen Demo -- multi drop-shadow Neon

实现心形线条动画

接下来,就是实现心形线条动画了,这点利用 SVG 还是比较简单的。

我们首先需要得到一个利用 SVG <path></path> 实现的心形形状,可以选择自己绘制 SVG 路径,也可以借助一些工具完成。

这里我借助了这个工具得到一个心形的 Path 路径:SVGPathEditor

通过工具,快速绘制想要的形状,拿到对应的 Path:

Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.

核心就是拿到这一段 SVG Path 路径:

M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160

有了它,利用 SVG 的 stroke-dasharraystroke-offset,我们可以轻松的得到一个心形追逐动画:

<div class="container">
    <svg>
        <path class="line" d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160" />
    </svg>
    <svg>
        <path class="line line2" d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160" />
    </svg>
</div>
body {
    background: #000;
}
svg {
    position: absolute;
}
.container {
    position: relative;
}
.line {
    fill: none;
    stroke-width: 10;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke: #fff;
    stroke-dasharray: 328 600;
    animation: rotate 2s infinite linear;  
}
.line2 {
    animation: rotate 2s infinite -1s linear;   
}
@keyframes rotate {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 928;
  }
}

简单解释上上述代码:

  • 两个相同的 SVG 图形,通过 stroke-dashoffset 将完整的线条图形截成部分

  • 通过 stroke-dashoffset

    Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et d'ombre en ligne.🎜🎜Grâce à cet article, vous pouvez apprendre :🎜
    • 🎜Comment utiliser filter: drop-shadow() pour ajouter des ombres simples et multiples à une partie de l'élément et utiliser plusieurs ombres pour obtenir l'effet Néon🎜
    • 🎜L'effet de lumière et d'ombre généré par les éléments HTML avec filter: drop-shadow() et les éléments SVG avec filter: drop-shadow( ) 🎜

    Animation de lumière et d'ombre au néon implémentée à l'aide de WebGL

    🎜Un jour, alors que je parcourais CodePen, j'ai trouvé un très intéressant, utilisant les effets de lumière et d'ombre de ligne implémentés par WebGL-- NEON LOVE , très intéressant :🎜🎜1 .gif🎜🎜 Cependant, comme le code source est complété en WebGL, dessiner un effet aussi simple nécessite près de 300 lignes de code comme les shaders GLSL. 🎜🎜Alors, pouvons-nous utiliser HTML(SVG)+CSS pour y parvenir ? 🎜

    Utilisez l'ombre portée pour ajouter des ombres simples et multiples à une partie du contenu de l'élément

    🎜Tout d'abord, pour obtenir l'effet ci-dessus, une étape très importante est de donner une partie du contenu de l'élément Ajouter une ombre supérieure. 🎜🎜Supposons que nous ayons un tel graphique : 🎜
    .line {
        ...
        --colorA: #f24983;
        filter:
            drop-shadow(0 0 2px var(--colorA))
            drop-shadow(0 0 5px var(--colorA))
            drop-shadow(0 0 10px var(--colorA))
            drop-shadow(0 0 15px var(--colorA))
            drop-shadow(0 0 25px var(--colorA));
    }
    
    .line2 {
        --colorA: #37c1ff;
    }
    🎜Nous définissons border-radius : 50% sur ce graphique div et ajoutons un border-top : 🎜rrreee🎜Le résultat Comme suit : 🎜🎜Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne. 🎜 🎜Si je veux juste ajouter une ombre à cet arc, essayez d'utiliser box-shadow : 🎜rrreee🎜emm, évidemment ça ne marchera pas, l'ombre sera ajoutée à l'ensemble du div : 🎜 🎜Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.🎜🎜Dans l'ordre pour résoudre cette situation, soyez intelligent Les étudiants penseront immédiatement à filter: drop-shadow(), qui est né pour résoudre ce problème. L'attribut box-shadow crée un rectangle. derrière toute la boîte de l'élément. shadow, tandis que le filtre drop-shadow() crée une ombre qui épouse la forme de l'image elle-même (canal alpha). 🎜🎜D'accord, remplaçons box-shadow par drop-shadow() : 🎜rrreee🎜De cette façon, nous pouvons obtenir une ombre qui épouse la forme de l'image lui-même (canal alpha) : 🎜🎜Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne. 🎜🎜et , drop-shadow() peuvent également être appliqués plusieurs fois à une image pour obtenir un effet d'ombres multiples similaire aux ombres : 🎜rrreee🎜Nous obtiendrons un effet de superposition d'ombres multiples de la partie visible du motif : 🎜🎜5. gif🎜🎜Nous allons rendre l'exemple ci-dessus en noir et blanc. En échangeant les couleurs, vous pouvez obtenir un motif très artistique, comme si vous regardiez une planète transmettant la lumière dans l'espace profond : 🎜🎜Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.🎜🎜Démo CodePen -- Neon multi-ombres portées🎜

    Réaliser le cœur Animation de ligne en forme de cœur

    🎜Connecter L'étape suivante consiste à réaliser l'animation de ligne en forme de cœur, qui est relativement simple à utiliser en SVG. 🎜🎜Nous devons d'abord implémenter une forme en forme de cœur à l'aide de SVG <path></path>. Vous pouvez choisir de dessiner le chemin SVG vous-même, ou vous pouvez utiliser certains outils pour le compléter. 🎜🎜Ici, j'ai utilisé cet outil pour obtenir un chemin en forme de cœur : SVGPathEditor🎜🎜Utilisez des outils pour dessiner rapidement la forme souhaitée et obtenir le chemin correspondant :🎜🎜Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.🎜🎜L'essentiel est d'obtenir ce chemin SVG : 🎜rrreee🎜Avec lui, utilisez le Stroke-dasharray et le de SVG >stroke-offset, nous pouvons facilement obtenir une animation de poursuite en forme de cœur : 🎜rrreeerrreee🎜Une brève explication du code ci-dessus : 🎜
    • 🎜Deux graphiques SVG identiques, coupez les graphiques de ligne complets en parties via Stroke-dashoffset🎜
    • 🎜Utilisez Stroke-dashoffset > changements à partir de 0 à 928 pour réaliser un cycle d'animation de ligne complet (928 voici la longueur du chemin complet, que l'on peut retrouver grâce aux scripts JavaScript) 🎜
    • 整个动画过程 2s,设置其中一个的 animation-delay: -1s,也就是提前 1s 触发动画,这样就实现了两个心形线条的追逐动画

    效果如下:

    Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.

    给线条添加光影

    有了上述两步的铺垫,这一步就非常好理解了。

    最后,我们只需要给两段 SVG 线条,利用 drop-shadow() 添加不同颜色的多重阴影即可:

    .line {
        ...
        --colorA: #f24983;
        filter:
            drop-shadow(0 0 2px var(--colorA))
            drop-shadow(0 0 5px var(--colorA))
            drop-shadow(0 0 10px var(--colorA))
            drop-shadow(0 0 15px var(--colorA))
            drop-shadow(0 0 25px var(--colorA));
    }
    
    .line2 {
        --colorA: #37c1ff;
    }

    最终,我们就利用 SVG + CSS 近乎完美的复刻了文章开头使用 WebGL 实现的效果:

    Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.

    完整的代码,你可以猛击 -- CSS 灵感 - SVG 配合 drop-shadow 实现线条光影效果

    扩展延伸

    当然,掌握了上述的技巧后,还有非常多有意思的效果我们可以去探索实现的,这里我简单的抛砖引玉。罗列两个我自己尝试的效果。

    其中一大类是运用于按钮之上,可以实现按钮带光影的按钮效果,下图是其中一个的示意,巧妙运用 stroke-dashoffset,它可以有非常多的变形:

    Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.

    完整源代码可以猛击 CodePen -- Neon Line Button

    当然,我们也不是一定要借助 SVG,仅仅是 HTML + CSS 也是可以运用这个效果,利用它实现一个简单的 Loading 效果:

    1Utilisez intelligemment la fonction drop-shadow() du filtre CSS pour créer des effets de lumière et dombre en ligne.

    完整源代码可以猛击 CodePen -- Neon Loading

    最后

    好了,本文到此结束,希望对你有帮助 :)

    如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

    原文地址:https://juejin.cn/post/7016521320183644173

    作者:chokcoco

    更多编程相关知识,请访问:编程视频!!

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer