分享一个利用CSS样式代码实现文字聚光灯特效的方法，其实现的逻辑方法与代码非常的简单，主要用到了CSS中的 animation 动画渐变背景等。

1、效果图片

2、实现代码

<style>
html,body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #222;
}
h1{
  font-size: 4rem;
  color: #333;
  width: 37.5rem;
  position: relative;
}
/* 使用伪元素加个遮罩层 */
h1::after{
  content:attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  background-image: linear-gradient(to left,#1a2a6c,#b21f1f,#fdbb2d); 
  background-clip: text;
  -webkit-background-clip: text;
  clip-path: ellipse(6.25rem 6.25rem at 0% 50%);
  animation: move 5s infinite;
}
@keyframes move{
  0%, 100%{
    clip-path: ellipse(6.25rem 6.25rem at 0% 50%);
  }
  50%{
    clip-path: ellipse(6.25rem 6.25rem at 100% 50%);
  }
}
</style>
<h1 data-text="顺晟科技博客站">
    顺晟科技博客站
</h1>