* {
margin:0;
padding:0;
}
body {
background:#000;
}
h1 {
position:absolute;
top:50%;
left:50%;
color:#ccc;
font-size:8em;
text-transform:uppercase;
transform:translate(-50%,-50%);
}
h1:after {
content:"SpotLIghT";
color:gold;
position:absolute;
top:0;
left:0;
color:transparent;
background:linear-gradient(90deg,#FFFF00,#9B30FF,#9AFF9A,#00FFFF);
background-clip:text;
-webkit-background-clip:text;
clip-path:circle(100px at 0% 50%);
animation:move 5s infinite;
}
/*聚光灯运动*/
@keyframes move {
0% {
clip-path:circle(100px at 0% 50%);
}
50% {
clip-path:circle(100px at 100% 50%);
}
100% {
clip-path:circle(100px at 0% 50%);
}
}更新时间:2021-07-16 00:43:49
一个可以运用到网站logo的聚光灯效果