有趣的CSS - 闪烁的鸿星尔克文字招牌效果

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是利用 animation 动画实现一个闪烁的霓虹灯文字效果。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

利用 animation 动画设置关键帧参数，再设置不同的延迟时间，达到一个闪烁的效果。

此效果可适用于一些文字入口、游戏类网站文字显示效果等场景。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="light23"><div class="title23"><span>鸿</span><span>星</span><span>尔</span><span>克</span></div><div class="info23"><span>to be number one</span></div>
</div>

页面搭建鸿星尔克品牌名称以及它耳熟能详的的slogan “To Be Number One”。

css 部分代码

.light23{cursor: default;
}
.title23{color: #eaeaea;font-size: 32px;font-weight: 900;
}
.info23{color: #eaeaea;font-size: 16px;letter-spacing: 1px;text-transform: capitalize;  /* 设置英文首字母大写 */
}
.light23:hover .title23 span{animation: light 0.4s ease forwards; /* 设置 forwards 属性，让动画保持在最后一个值 */
}
.light23:hover .title23 span:nth-of-type(2){animation-delay: .14s;
}
.light23:hover .title23 span:nth-of-type(3){animation-delay: .42s;
}
.light23:hover .title23 span:nth-of-type(4){animation-delay: .78s;
}
@keyframes light{10%,30%,50%{color: #eaeaea;text-shadow: none;}20%,40%,60%{color: #318BF6;text-shadow: 0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;}100% {color: #318BF6;text-shadow:0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;}
}
.light23:hover .info23 span{animation: light 0.4s ease forwards;animation-delay: 1s;
}

利用 animation 动画在关键帧中设置不同的显示效果，然后不同的元素设置 animation-delay 加上不同的延迟时间，形成闪烁的视觉效果。

注意：设置 animation 动画时，animation-fill-mode 要设置为 forwards，以使动画执行完后保持在最后的状态不变。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>闪烁的霓虹灯文字</title></head><body><div class="app"><div class="light23"><div class="title23"><span>鸿</span><span>星</span><span>尔</span><span>克</span></div><div class="info23"><span>to be number one</span></div></div></div></body>
</html>

css 样式

/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.light23{cursor: default;
}
.title23{color: #eaeaea;font-size: 32px;font-weight: 900;
}
.info23{color: #eaeaea;font-size: 16px;letter-spacing: 1px;text-transform: capitalize;
}
.light23:hover .title23 span{animation: light 0.4s ease forwards;
}
.light23:hover .title23 span:nth-of-type(2){animation-delay: .14s;
}
.light23:hover .title23 span:nth-of-type(3){animation-delay: .42s;
}
.light23:hover .title23 span:nth-of-type(4){animation-delay: .78s;
}
@keyframes light{10%,30%,50%{color: #eaeaea;text-shadow: none;}20%,40%,60%{color: #318BF6;text-shadow: 0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;}100%{color: #318BF6;text-shadow:0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;}
}
.light23:hover .info23 span{animation: light 0.4s ease forwards;animation-delay: 1s;
}