CSS实现文字聚光灯效果

实现代码

body{
    background:#222;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}
h1{
    color:#333;
    font-size:8rem;
}
h1:after{
    content:"SPOTLIGHT";
    color:transparent;
    position:absolute;
    left:0;
    top:0;
    background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
    background-clip:text;
    -webkit-background-clip: text;
    clip-path:circle(100px at 0% 50%);
    -webkit:circle(100px at 0% 50%);
    animation:light 5s infinite;
}

@keyframes light{
    0%{
        clip-path:circle(100px at 0% 50%);
        -webkit:circle(100px at 0% 50%);
    }
    50%{
        clip-path:circle(100px at 100% 50%);
        -webkit:circle(100px at 100% 50%);
    }
    100%{
        clip-path:circle(100px at 0% 50%);
        -webkit:circle(100px at 0% 50%);
    }
}