CSS3 聚光灯特效

最新推荐文章于 2022-07-15 12:53:45 发布

原创最新推荐文章于 2022-07-15 12:53:45 发布 · 374 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #前端

本文通过一个前端小案例展示了如何利用CSS3的clip-path和animation属性实现聚光灯特效。代码中创建了两个h1元素，分别应用不同的动画效果，形成聚光灯在文字上移动的视觉体验，为网页增添动态感。

1.效果图
聚光灯
2.源码
这里主要用到css3中的裁剪clip-path属性，以及动画animation属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css3聚光灯特效</title>
		<style>
			body{
				position: relative;
				width: 100vw;
				height: 100vh;
				background-color: #000;
			}
			.bigBox{
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -600px;
				margin-top: -250px;
				width: 1200px;
				height: 500px;
				color: #fff;
				font-size: 60px;
				
			}
			.bigBox h1{
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -600px;
				margin-top: -250px;
				width: 1200px;
				height: 500px;
				display: flex;
				justify-content: center;
				align-items: center;
				text-shadow:0 0 50px #fff;
			}
			.bCircle{
				z-index: -1;
				clip-path: ellipse(200px 200px at 0% 50%);
				opacity: .3;
				animation: move1 3s infinite linear;
			}
			.sCircle{
				clip-path: ellipse(100px 100px at 0% 50%);
				animation: move2 3s infinite linear;
			}
			@keyframes move1 {
				0%{
					clip-path: ellipse(200px 200px at 30% 50%);
				}
				50%{
					clip-path: ellipse(200px 200px at 70% 50%);
				}
				100%{
					clip-path: ellipse(200px 200px at 30% 50%)
				}
			}
			@keyframes move2 {
				0%{
					clip-path: ellipse(100px 100px at 30% 50%);
				}
				50%{
					clip-path: ellipse(100px 100px at 70% 50%);
				}
				100%{
					clip-path: ellipse(100px 100px at 30% 50%)
				}
			}
		</style>
	</head>
	<body>
		<div class="bigBox">
				<h1 class="bCircle">Hello Everyone</h1>
				<h1 class="sCircle">Hello Everyone</h1>
		</div>
	</body>
</html>

每天一个前端小案例！！