CSS3效果光斑动画(渐变)

最新推荐文章于 2023-12-29 17:07:52 发布

Cokeny.

最新推荐文章于 2023-12-29 17:07:52 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： css3 渐变

前端专栏收录该内容

15 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: black;
				text-align: center;
				font: 50px/200px "微软雅黑";
				color: rgba(255,255,255,.3);
			}
			h1{
				display: inline-block;
				background: linear-gradient(120deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 270px);
				background-position: -300px 0;
				background-repeat:no-repeat ;
				-webkit-background-clip: text;
				/*transition: 3s;*/
			}
			/*body:hover h1{
				background-position: 1000px 0;
			}*/
			
		</style>
	</head>
	<body>
		<h1>北京光电传媒股份</h1>
	</body>
	<script type="text/javascript">
		var h1Node = document.getElementsByTagName("h1")[0];
		var left =-300;
		move();
		function move(){
			setInterval(function(){
				left+=10;
				if(left>1000){
					left=-300;
				}
				h1Node.style.backgroundPosition=left+"px 0px";
			},20)
		}
	</script>
</html>