CSS实现文字光影特效,不来尝试一下吗

350 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第13天,点击查看活动详情

今天分享一个前端用CSS实现文字连续光影特效的技巧,看效果图是不是很漂亮,实现起来也很简单,走起

思路

我们只留一个文字遮挡住其他文字观察发现这个效果具体到每一个字符就是一个颜色变化的发光熄灭效果,知道这一点我们实现起来就有思路了

实现

首先进行布局

在HTML中每一个字符都用一个span标签包裹,每一个字符进行发光熄灭,动态的文字可用JS生成

<body>
  <div class="text_wrap">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</body>

设置一下背景颜色,文字居中显示

body{
  background-color: #1e1f25;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

实现文字发光熄灭的效果

span{
  color: #faebd7;
  font-size: 70px;
  margin: 0 3px;
  animation: shadow 1s ease-in-out infinite alternate;
}
@keyframes shadow {
  to{
    color: #ff0266;
    text-shadow: 20px 0 70px #ff0266;
  }
}

字符设置默认颜色,用keyframes 写一个从默认颜色到另一个颜色的过渡动画,添加animation属性

  • ease-in-out 表示以慢速开始和结束的过渡效果
  • infinite 表示循环
  • alternate 让动画交替的反向变换, 没有这个属性 动画会立即回到初始状态再执行,大家可以尝试一下

每一个字符动画延迟一段时间

span:nth-child(n+2){
  animation-delay: 0.2s;
}
span:nth-child(n+3){
  animation-delay: 0.4s;
}
span:nth-child(n+4){
  animation-delay: 0.6s;
}
span:nth-child(n+5){
  animation-delay: 0.8s;
}
span:nth-child(n+6){
  animation-delay: 1s;
}
span:nth-child(n+7){
  animation-delay: 1.2s;
}

这里可以利用预编译器通过循环生成这段css

以上就是实现这个酷炫效果的小技巧,是不是很easy,赶快用起来吧