很漂亮的星空图片制作

最新推荐文章于 2021-06-29 21:01:23 发布

lijianli_131300

最新推荐文章于 2021-06-29 21:01:23 发布

阅读量249

点赞数

分类专栏： HTML5

原文链接：https://blog.csdn.net/qq_42381297/article/details/82655547?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

转载自：https://blog.csdn.net/qq_42381297/article/details/82655547?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

效果：

星空效果

源代码：

<!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>

lijianli_131300

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
很漂亮的星空图片制作

转载自：https://blog.csdn.net/qq_42381297/article/details/82655547?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.noneca
复制链接

扫一扫

专栏目录