光斑动画(代码和一点个人粗浅注解)

最新推荐文章于 2024-11-18 16:32:24 发布

可可爱爱小康一

最新推荐文章于 2024-11-18 16:32:24 发布

阅读量187

点赞数

分类专栏： study-css 文章标签： css

本文链接：https://blog.csdn.net/weixin_43073298/article/details/106736983

版权

study-css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

光斑动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				/*给body一个背景,因为字体是透明的,不设置背景看不到*/
				background: #000;
			}
			#box{
				margin-top:200px;
				font: 700 80px "幼圆";
				/*字体需要设置透明,因为下面的光斑动画这样才能穿透字体显示效果*/
				color: rgba(255,255,255,0.5);
				text-align: center;
				/*文字裁剪，使得背景动画只在文字里面显示*/
				-webkit-background-clip: text;
				/*设置背景动画，135度角打光，透明度从0到1再到0*/
				background-image: linear-gradient(135deg,rgba(255,255,255,0) 70px,rgba(255,255,255,1) 140px,
				rgba(255,255,255,0) 210px);
			}
		</style>
	</head>
	<body>
			<h1 id="box">lokeli洛克李</h1>	
			<script type="text/javascript">
				//因为背景动画要在一定幅度内变动，所以使用js控制下位置变量
				var num=250;
				var distance = document.getElementById('box');
				setInterval(function  () {
					num += 20;
					if (num > 800) {
						num = 250;
					}
					distance.style.backgroundPosition = num+'px 0px';
				},50)
			</script>
	</body>
</html>

这只是一个很基础的应用，还有更多进阶的用法，大家可以自行查询文档