Home >Web Front-end >CSS Tutorial >Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

青灯夜游
青灯夜游forward
2021-10-08 19:00:003683browse

This article will introduce a drop-shadow() method that uses CSS filter filter to add shadow effects to parts of HTML elements and SVG elements to achieve a cool light and shadow effect. Use in a variety of different scenarios.

Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

Through this article, you can learn:

  • How to use filter: drop-shadow() Add single and multiple shadows to part of the element, and use multiple shadows to achieve the Neon effect

  • HTML element coordinationfilter: drop-shadow() And the light and shadow effect generated by SVG elements with filter: drop-shadow()

Line light and shadow Neon animation implemented using WebGL

One day in When browsing CodePen, I found a very interesting line light and shadow effect implemented using WebGL - NEON LOVE, very interesting:

Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

But Since the source code is completed using WebGL, drawing such a simple effect requires nearly 300 lines of code such as GLSL shaders.

So, can we achieve it using HTML(SVG) CSS?

Use drop-shadow to add single and multiple shadows to part of the element's content

First of all, to achieve the above effect, a very important step is to add a shadow to part of the element's content.

Suppose we have such a graphic:

<div></div>

We set border-radius: 50% to this div graphic, and add a border-top:

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

The result is as follows:

Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

If I want to just add a shadow to this arc, try using box-shadow:

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

emm, obviously this is not possible, the shadow will be added to the entire div:

Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

In order to solve this situation, smart students will immediately think of filter: drop-shadow(), it was born to solve this problem, the box-shadow attribute creates a rectangular shadow behind the entire box of the element, and drop -shadow() The filter creates a shadow that conforms to the shape of the image itself (alpha channel).

Okay, we use drop-shadow() to replace 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);
}

In this way, we can get the shape that matches the image itself ( Alpha channel) shadow:

Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

And, drop-shadow() can also be applied multiple times to an image to achieve multiple shadow effects similar to shadows :

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

We will get the multiple shadow overlay effect of the visible part of the pattern:

Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

We will exchange the black and white colors of the above example to get a A very artistic pattern, like looking at a light-transmitting planet in the deep space:

Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

CodePen Demo -- multi drop-shadow Neon

Realize heart-shaped line animation

The next step is to implement heart-shaped line animation, which is relatively simple using SVG.

We first need to get a heart-shaped shape implemented using SVG <path></path>. You can choose to draw the SVG path yourself, or you can use some tools to complete it.

Here I used this tool to get a heart-shaped Path: SVGPathEditor

Use the tool to quickly draw the desired shape and get the corresponding Path:

Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

The core is to get this SVG Path 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

With it, use SVG’s stroke-dasharray and stroke-offset, we can easily get a heart-shaped chasing animation:

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

Briefly explain the above code:

  • Two identical SVG graphics , cut the complete line graphic into parts by stroke-dashoffset

  • by changing stroke-dashoffset from 0 to 928, to achieve A complete line animation cycle (928 here is the length of the complete path, which can be found through JavaScript script)

  • 整个动画过程 2s,设置其中一个的 animation-delay: -1s,也就是提前 1s 触发动画,这样就实现了两个心形线条的追逐动画

效果如下:

Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

给线条添加光影

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

最后,我们只需要给两段 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 实现的效果:

Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

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

扩展延伸

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

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

Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

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

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

1Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects

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

最后

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

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

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

作者:chokcoco

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

The above is the detailed content of Cleverly use the drop-shadow() function of CSS filter to create line light and shadow effects. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:掘金--chokcoco. If there is any infringement, please contact admin@php.cn delete