Html
    Css
    Js

    
                        
* {
	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%);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.1
 立即下载

纯css聚光灯效果

更新时间:2021-07-16 00:43:49

一个可以运用到网站logo的聚光灯效果

0