CSS中妙用 drop-shadow 实现线条光影效果


Posted in HTML / CSS onNovember 11, 2021

本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴影效果,以实现一种酷炫的光影效果,用于各种不同的场景之中。通过本文,你可以学到:

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

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

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

CSS中妙用 drop-shadow 实现线条光影效果

但是由于源代码是使用 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%;
}

结果如下:

CSS中妙用 drop-shadow 实现线条光影效果

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

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

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

CSS中妙用 drop-shadow 实现线条光影效果

为了解决这种情况,聪明的同学会立马想到 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 通道)的阴影:

CSS中妙用 drop-shadow 实现线条光影效果

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

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

CSS中妙用 drop-shadow 实现线条光影效果

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

CSS中妙用 drop-shadow 实现线条光影效果

CodePen Demo -- multi drop-shadow Neon

实现心形线条动画

接下来,就是实现心形线条动画了,这点利用 SVG 还是比较简单的。关于 SVG 线条动画,之前也有多次提及,感兴趣的同学也可以看看这两篇文字:

CSS+SVG制作手机端订单结算ui布局特效代码

HTML5+SVG制作文件上传ui样式特效代码

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

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

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

CSS中妙用 drop-shadow 实现线条光影效果

核心就是拿到这一段 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 的从 0 到 928 的变化,实现一次完整的线条动画循环(这里的 928 是完整的 path 的长度,可以通过 JavaScript 脚本求出)
  • 整个动画过程 2s,设置其中一个的 animation-delay: -1s,也就是提前 1s 触发动画,这样就实现了两个心形线条的追逐动画

效果如下:

CSS中妙用 drop-shadow 实现线条光影效果

给线条添加光影

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

最后,我们只需要给两段 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中妙用 drop-shadow 实现线条光影效果

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

扩展延伸

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

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

CSS中妙用 drop-shadow 实现线条光影效果

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

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

CSS中妙用 drop-shadow 实现线条光影效果

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

最后

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

更多精彩 CSS 效果可以关注我的 CSS 灵感

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

到此这篇关于CSS中妙用 drop-shadow 实现线条光影效果的文章就介绍到这了,更多相关css drop-shadow 线条光影内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
纯 CSS 自定义多行省略的问题(从原理到实现)
CSS作用域(样式分割)的使用汇总
使用CSS实现小三角边框原理解析
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
You might like
php中session定期自动清理的方法
2015/11/12 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
如何基于Python批量下载音乐
2019/11/11 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
幼儿园保育员辞职信
2014/01/12 职场文书
婚礼主持词
2014/03/13 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
创业计划书之餐饮
2019/09/02 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
python 对图片进行简单的处理
2021/06/23 Python