html5霓虹效果代码，纯CSS实现酷炫的霓虹灯效果（附
demo）
最近关注了油管上的 CSS Animation Effects Tutorial 系列，⾥⾯介绍了⾮常多有意思的 CSS 动效。其中第⼀个就是很酷炫的霓虹灯效果，这⾥就实现思路做⼀个简单的记录和分享。
这是要实现的效果：
可以看到，在⿏标移⼊按钮的时候，会产⽣类似霓虹灯光的效果；在⿏标移出按钮的时候，会有⼀束光沿着固定的轨迹(按钮外围)运动。
霓虹灯光的实现
霓虹灯光的实现⽐较简单，⽤多重阴影来做即可。我们给按钮加三层阴影，从内到外每层阴影的模糊半径递增，这样的多个阴影叠加在⼀起，就可以形成⼀个类似霓虹灯光的效果。这段的代码如下：
HTML：
Neon Button
CSS：
body {
shadow什么意思啊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 {
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
}
最终的效果如下：
运动光束的实现
虽然看起来只有⼀个光束沿着按钮的边缘运动，但实际上这是四个光束沿着不同⽅向运动之后叠加的效果。它们运动的⽅向分别是：从左往右、从上往下、从右往左、从下往上，如下图所⽰：
在这个过程中，光束和光束之间产⽣了交集，如果只看按钮的边缘部分，就很像是只有⼀个光束在做顺时针⽅向的运动。
下⾯是具体实现中⼏个需要注意的点：
四个光束分别对应 div.light 的四个⼦ div，初始位置分别是在按钮的最左侧、最上⽅、最右侧和最下⽅，并按照固定的⽅向做重复的运动
每个光束的⾼度或宽度都很⼩(只有 2px)，并且都有⼀个从透明⾊到霓虹⾊的渐变，因此外表会有⼀个收束的效果(即看上去不是⼀条完整的线条)
为了确保我们看到的是⼀个顺时针⽅向的运动，四个光束的运动实际上是有序的，⾸先是按钮上⽅的光束开始运动，在⼀段时间后，右侧的光束运动，在⼀段时间后，下⽅的光束运动，在⼀段时间后，左侧的光束运动。光束和光束之间的运动有⼀个延迟，以上⽅和右侧的光束为例，如果它们同时开始运动，由于右侧的运动距离⼩于上⽅的运动距离，就会导致这两个光束错过相交的时机，我们看到的就会是断开的、不连贯的光束。既然右侧光束的运动距离⽐较短，为了让上⽅光束可以“追上”它，我们就得让右侧光束“延迟出发”，因此要给它⼀个动画延迟；同理，剩余两个光束也要有⼀个动画延迟。多个动画延迟之间⼤概相差 0.25 秒即可。
只需要显⽰按钮边缘的光束就够了，因此给 div.light 设置⼀个溢出隐藏
代码如下：
HTML：
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;
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 {
}
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实现酷炫的霓虹灯效果(附demo)的⽂章就介绍到这了，更多相关CSS霓虹灯 内容请搜索脚本之家以前的⽂章或继续浏

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。