关于前端:CSS-奇技淫巧-妙用-dropshadow-实现线条光影效果

本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow()，实现对 HTML 元素及 SVG 元素的局部增加暗影成果，以实现一种酷炫的光影成果，用于各种不同的场景之中。通过本文，你能够学到：

1. 如何利用 filter: drop-shadow() 对元素的局部内容增加单重及多重暗影，以及利用多重暗影实现 Neon 成果
2. HTML 元素配合 filter: drop-shadow() 以及 SVG 元素配合 filter: drop-shadow() 生成的光影成果

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

某天在逛 CodePen 的时候，发现了一个十分有意思的，应用 WebGL 实现的线条光影成果 — NEON LOVE，十分的有意思：

然而因为源代码是应用 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%;
}

后果如下：

如果我心愿，仅仅只给这个圆弧增加暗影，尝试应用 box-shadow：

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

emm，显著是不行的，暗影会加给整个 div：

为了解决这种状况，聪慧的同学会立马想到 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 通道) 的暗影：

并且，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);
}

咱们将失去可见局部图案的多重暗影叠加成果：

咱们将上述例子的黑白色彩对换一下，就能失去一副很有意境的图案，像是在高深的太空中看某个透光的星球般：

CodePen Demo — multi drop-shadow Neon

实现心形线条动画

接下来，就是实现心形线条动画了，这点利用 SVG 还是比较简单的。对于 SVG 线条动画，之前也有屡次提及，感兴趣的同学也能够看看这两篇文字：

• 【Web 动画】SVG 线条动画入门
• 【Web 动画】SVG 实现简单线条动画

咱们首先须要失去一个利用 SVG <Path> 实现的心形形态，能够抉择本人绘制 SVG 门路，也能够借助一些工具实现。

这里我借助了这个工具失去一个心形的 Path 门路：SVGPathEditor

通过工具，疾速绘制想要的形态，拿到对应的 Path：

外围就是拿到这一段 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-dasharray 和 stroke-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;}
}

简略解释上上述代码：

1. 两个雷同的 SVG 图形，通过 stroke-dashoffset 将残缺的线条图形截成局部
2. 通过 stroke-dashoffset 的从 0 到 928 的变动，实现一次残缺的线条动画循环（这里的 928 是残缺的 path 的长度，能够通过 JavaScript 脚本求出）
3. 整个动画过程 2s，设置其中一个的 animation-delay: -1s，也就是提前 1s 触发动画，这样就实现了两个心形线条的追赶动画

成果如下：

## 给线条增加光影

有了上述两步的铺垫，这一步就十分好了解了。

最初，咱们只须要给两段 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 实现的成果：

残缺的代码，你能够猛击 — CSS 灵感 – SVG 配合 drop-shadow 实现线条光影成果

扩大延长

当然，把握了上述的技巧后，还有十分多有意思的成果咱们能够去摸索实现的，这里我简略的抛砖引玉。列举两个我本人尝试的成果。

其中一大类是使用于按钮之上，能够实现按钮带光影的按钮成果，下图是其中一个的示意，奇妙使用 stroke-dashoffset，它能够有十分多的变形：

残缺源代码能够猛击 CodePen — Neon Line Button

当然，咱们也不是肯定要借助 SVG，仅仅是 HTML + CSS 也是能够使用这个成果，利用它实现一个简略的 Loading 成果：

残缺源代码能够猛击 CodePen — Neon Loading

最初

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

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

更多精彩 CSS 成果能够关注我的 CSS 灵感

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

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