聚光灯效果(css+html)

最终效果:
聚光灯效果(css+html)_第1张图片
实现code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>聚光灯效果</title>
		<style>
			*{
				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: "Hello JavaScript";
				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%);
				}
			}
		</style>
		
	</head>
	<body>
		<div><h1>Hello JavaScript</h1></div>
	</body>
</html>

END

你可能感兴趣的:(JavaWeb)