Share What
I Am Using or Studying

HTML+CSS实现聚光灯效果

无JS,纯CSS实现聚光灯效果。html和css如下。

效果图:

html代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>聚光灯效果</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		
	</head>
	<body>
		<h1>SPOTLIGHT</h1>
	</body>
</html>

CSS代码:

*{
	margin: 0;
	padding: 0;
}
body{
	background: #222;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
h1{
	color: #333;
	font-size: 8rem;
	position: relative;
}
h1::after{
	content: "SPOTLIGHT";
	color: transparent;
	position: absolute;
	left: 0;
	top: 0;
	background: -webkit-linear-gradient(left,#c23616,#192a56,#00d2d3,yellow,
	#6D214f,#2e86de,#4cd137,#e84118);
	background-clip: text;
	-webkit-background-clip: text;
	clip-path: circle(100px at 0% 50%);
	-webkit-clip-path: circle(100px at 0% 50%);
	animation: light 5s infinite;
}
@keyframes light{
	0%{
		clip-path: circle(100px at 0% 50%);
		-webkit-clip-path: circle(100px at 0% 50%);
	}
	50%{
		clip-path: circle(100px at 100% 50%);
		-webkit-clip-path: circle(100px at 100% 50%);
	}
	100%{
		clip-path: circle(100px at 0% 50%);
		-webkit-clip-path: circle(100px at 0% 50%);
	}
}
赞(0) 打赏
未经允许不得转载:YYishare » HTML+CSS实现聚光灯效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)

觉得文章有用就打赏一下作者,您的支持是站长的最大动力

支付宝扫一扫打赏

微信扫一扫打赏