CSS实现文字聚光灯效果

使用CSS样式可以对文字实现一个聚光灯来回照射的效果，其原理也很简单，下面是参考示例。

CSS聚光灯效果原理：

1、将两个文字重叠，内层是灰色，外层为渐变色

2、在外层文字加上圆形的遮罩层

3、对外层的文字加上动画效果

CSS聚光灯效果示例

1、先上示例图片

2、示例代码

<style>
html,body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #222;
}
span{
    font-size: 4rem;
    color: #333;
    width: 37.5rem;
    position: relative;
    font-weight: bold;
}
/* 使用伪元素加个遮罩层 */
span::after{
    content:attr(data-text); /*读取元素的 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>
<span data-text="73so.com">73so.com</span>