纯CSS实现酷炫的霓虹灯效果


Posted in HTML / CSS onApril 13, 2021

最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效。其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享。

这是要实现的效果:

纯CSS实现酷炫的霓虹灯效果

可以看到,在鼠标移入按钮的时候,会产生类似霓虹灯光的效果;在鼠标移出按钮的时候,会有一束光沿着固定的轨迹(按钮外围)运动。

霓虹灯光的实现

霓虹灯光的实现比较简单,用多重阴影来做即可。我们给按钮加三层阴影,从内到外每层阴影的模糊半径递增,这样的多个阴影叠加在一起,就可以形成一个类似霓虹灯光的效果。这段的代码如下:

HTML:

<div class="light">
    Neon Button
 </div>

CSS:

body {
 background: #050901;   
}
.light {
  width: fit-content;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}

最终的效果如下:

纯CSS实现酷炫的霓虹灯效果

运动光束的实现

虽然看起来只有一个光束沿着按钮的边缘运动,但实际上这是四个光束沿着不同方向运动之后叠加的效果。它们运动的方向分别是:从左往右、从上往下、从右往左、从下往上,如下图所示:

纯CSS实现酷炫的霓虹灯效果

在这个过程中,光束和光束之间产生了交集,如果只看按钮的边缘部分,就很像是只有一个光束在做顺时针方向的运动。
下面是具体实现中几个需要注意的点:

  • 四个光束分别对应 div.light 的四个子 div,初始位置分别是在按钮的最左侧、最上方、最右侧和最下方,并按照固定的方向做重复的运动
  • 每个光束的高度或宽度都很小(只有 2px),并且都有一个从透明色到霓虹色的渐变,因此外表会有一个收束的效果(即看上去不是一条完整的线条)
  • 为了确保我们看到的是一个顺时针方向的运动,四个光束的运动实际上是有序的,首先是按钮上方的光束开始运动,在一段时间后,右侧的光束运动,在一段时间后,下方的光束运动,在一段时间后,左侧的光束运动。光束和光束之间的运动有一个延迟,以上方和右侧的光束为例,如果它们同时开始运动,由于右侧的运动距离小于上方的运动距离,就会导致这两个光束错过相交的时机,我们看到的就会是断开的、不连贯的光束。既然右侧光束的运动距离比较短,为了让上方光束可以“追上”它,我们就得让右侧光束“延迟出发”,因此要给它一个动画延迟;同理,剩余两个光束也要有一个动画延迟。多个动画延迟之间大概相差 0.25 秒即可。
  • 只需要显示按钮边缘的光束就够了,因此给 div.light 设置一个溢出隐藏

代码如下:

HTML:

<div class="light">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    Neon Button
</div>

CSS:

.light {
  position: relative;
  padding: 25px 30px;
  color: #03e9f4;
  font-size: 24px;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  cursor: pointer;
  overflow: hidden;
}
.light:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}
.light div {
  position: absolute;
}
.light div:nth-child(1){
  width: 100%;
  height: 2px;
  top: 0;
  left: -100%;
  background: linear-gradient(to right,transparent,#03e9f4);
  animation: animate1 1s linear infinite;
}
.light div:nth-child(2){
  width: 2px;
  height: 100%;
  top: -100%;
  right: 0;
  background: linear-gradient(to bottom,transparent,#03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
.light div:nth-child(3){
  width: 100%;
  height: 2px;
  bottom: 0;
  right: -100%;
  background: linear-gradient(to left,transparent,#03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
.light div:nth-child(4){
  width: 2px;
  height: 100%;
  bottom: -100%;
  left: 0;
  background: linear-gradient(to top,transparent,#03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

这样就可以达到文章开头图片的效果了。

不同颜色的霓虹灯

如果想要其它颜色的霓虹灯光效果怎么办呢?是否需要把相关的颜色重新修改一遍?其实我们有更简单的方法,就是使用 filter:hue-rotate(20deg) 一次性修改 div.light 和内部所有元素的色相/色调。

The hue-rotate() CSS function rotates the hue of an element and its contents.

最终效果如下:

纯CSS实现酷炫的霓虹灯效果

到此这篇关于纯CSS实现酷炫的霓虹灯效果(附demo)的文章就介绍到这了,更多相关CSS霓虹灯 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3发光搜索表单分享
Apr 11 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
CSS3实现三角形不断放大效果
css3实现背景图片颜色修改的多种方式
Apr 13 #HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 #HTML / CSS
CSS3 制作的书本翻页特效
浅谈移动端中的视口(viewport)的具体使用
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
CSS3 制作的彩虹按钮样式
You might like
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
PHP Array交叉表实现代码
2010/08/05 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
python 性能提升的几种方法
2016/07/15 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
工程部经理岗位职责
2013/12/08 职场文书
班长演讲稿范文
2014/04/24 职场文书
实习推荐信
2014/05/10 职场文书
会计求职自荐信
2014/06/20 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS