CSS 世界之文字聚光灯动画

效果展示

<div class="container">
  <div class="spotlight" data-text="View Room">View Room</div>
</div>

.container {
  position: relative;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.spotlight {
  color: #f1f3f7;
  font-size: 40px;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
}
.spotlight:before {
  content: attr(data-text);
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  background-image: linear-gradient(
    90deg,
    #1e76e6 0%,
    #1fb2f0 30%,
    #27d3d9 66%,
    #1ff0bc 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  animation: spotlight 8s linear infinite;
}
@keyframes spotlight {
  0% {
    clip-path: ellipse(32px 32px at 0 50%);
  }
  50% {
    clip-path: ellipse(32px 32px at 100% 50%);
  }
  100% {
    clip-path: ellipse(32px 32px at 0 50%);
  }
}

实现思路

使用 background-clip 和 clip-path ，并配合 animation，实现聚光灯效果

还使用了 CSS 表达式 attr() 来获取元素文本，具体使用方法请参考 MDN-attr

text-transform: uppercase; 是为了使文本内容全部大写