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

最新推荐文章于 2024-04-02 13:19:03 发布

设计师工作日常

最新推荐文章于 2024-04-02 13:19:03 发布

阅读量1.5k

点赞数 45

分类专栏：有趣的css 文章标签： css 前端 ui ux 鸿星尔克文字招牌动效

本文链接：https://blog.csdn.net/justliu1989/article/details/136387662

版权

有趣的css 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

大家好，我是 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;
}