JS特效 # 星空背景

最新推荐文章于 2024-07-31 10:25:36 发布

真·skysys

最新推荐文章于 2024-07-31 10:25:36 发布

阅读量3.2k

点赞数 12

分类专栏：大前端和跨平台技术

原文链接：https://blog.csdn.net/qq_42381297/article/details/82655547

版权

大前端和跨平台技术专栏收录该内容

329 篇文章 105 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文展示了如何使用JavaScript创建一个动态的星空背景效果，通过代码实现星星闪烁和移动，为网页增添视觉吸引力。

摘要由CSDN通过智能技术生成

demo:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>太空</title>
	<style>
		body{
			width: 100%;
			height: 1000px;
			background: linear-gradient(to bottom right, #000, #2073c2 60%, #dff6ff);
			overflow: hidden;
		}
		span{
			display: block;
			position: absolute;
			border-radius: 50%;
			box-shadow: 0.4px 0.4px 0.4px 0px #fff;
		}
	</style>
</head>
<body>
 
<script>
	window.onload = function(){
		var screenW = document.documentElement.clientWidth;
		var screenH = document.documentElement.clientHeight;
		var colorArr = ['#fff','skyblue','orange'];
		console.log(screenW);
		for( var i=0; i<800; i++ ){
			var span = document.createElement('span');
			var width = Math.random() * 3;
			var colorIndex = parseInt(Math.random() * 3);
			var x = parseInt(Math.random() * screenW);
			var y = parseInt(Math.random() * screenH);
			span.style.width = parseInt(width) + 'px';
			span.style.height = parseInt(width) + 'px';
			span.style.background = colorArr[colorIndex];
			span.style.left = x + 'px';
			span.style.top = y + 'px';
 
			document.body.appendChild(span);
		}
	}
</script>
 
</body>
</html>