宇宙星空背景(动态)

可用于大屏幕背景, 利用sass批量设置随机大小圆形阴影, 同理设置快慢不一的动画。

方法1️⃣

html

<div class="sky-modal">
	<div class="sky-layer1"></div>
	<div class="sky-layer2"></div>
	<div class="sky-layer3"></div>
</div>

scss

@function getShadows($n) {
	$result: '#{calc(random(1000) / 10)}vw #{calc(random(1000) / 10)}vh 0 #fff';
	@for $i from 2 through $n {
		$result: $result + ', #{calc(random(1000) / 10)}vw #{calc(random(1000) / 10)}vh 0 #fff';
	}
	@return unquote($result);
}

@keyframes moveUp {
	to {
		transform: translateY(-100vh);
	}
}

.sky-modal {
	height: 100vh;
	width: 100vw;
	background-image: radial-gradient(#04255b,#020a1d);
	position: relative;
	overflow: hidden;
}

$duration: 200s;
$n: 1000;
@for $i from 1 through 3 {
	$duration: calc($duration / 3);
	$n: floor(calc($n / 2));
	.sky-layer#{$i} {
		$size: #{($i + 1) * 0.7}px;
		$duration: #{$duration};
		position: absolute;
		left: 0;
		top: 0;
		width: $size;
		height: $size;
		border-radius: 50%;
		background: red;
		box-shadow: getShadows($n);
		animation: moveUp $duration linear infinite;
		/* 在他的下面复制一份一样的保证动画的连续性 */
		&::after {
			content: '';
			position: inherit;
			left: 0;
			top: 100vh;
			width: inherit;
			height: inherit;
			border-radius: inherit;
			box-shadow: inherit;
		}
	}
}

方法2️⃣

重写中...