CSS实现聚光灯效果代码

<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>

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/8720.html