css3光线划过字体效果

最近学习了一种很炫酷的CSS3效果——光线划过字体效果，非常适合用在标题、特殊提示等地方。今天就来介绍一下如何实现这种效果。

@keyframes shine {
  to {
    background-position: 200%;
  }
}
 
h1 {
  font-size: 4rem;
  background-image: linear-gradient(to right,#FFF 0%,#FFF 50%,#FFD700 50%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-animation: shine 3s linear infinite;
          animation: shine 3s linear infinite;
}

首先，我们定义一个名为shine的动画，通过改变背景图片的位置，产生光线划过的效果。

接下来，在要应用这种特效的标题元素中，我们使用线性渐变的背景图片，将颜色区域划分为白色和金色两个部分，分别占了50%的宽度。然后，将文字的颜色设置为透明，以使文字看不见，同时将背景图片的位置剪切到文字的区域中。

最后，将shine动画的持续时间设置为3秒，并将其循环播放。

到这里，我们就可以愉快地得到一个光线划过字体效果啦！当然，如果你不想要金色，也可以将渐变颜色改为其他颜色，试试不同效果吧！

好啦，以上就是实现光线划过字体效果的全部代码，甚至不需要一行JavaScript代码！是不是很cool呢？快来试试吧！