纯css星空动画

让大家实现一个这样的星空动画效果,大家会怎么做? js,不! 其实使用css就能写

我也不藏着掖着,源码直接放下面了

html 复制代码

	<script setup>
	</script>
	
	<template>
	  <div class="box">
	    <div v-for="i in 5" :key="i" :class="'layer' + i"></div>
	  </div>
	</template>
	
	<style scoped lang="scss">
	@use "sass:math";
	$size: 20px;
	$duration: 800s;
	$count: 1300;
	.box {
	  height: 100vh;
	  width: 100vw;
	  background: black;
	}
	
	.title {
	  background-clip: text;
	  color: transparent;
	}
	@function getShadows($n) {
	  $shadows: "#{random(100)}vw #{random(100)}vh #fff";
	  @for $i from 2 through $n {
	    $shadows: "#{$shadows}, #{random(100)}vw #{random(100)}vh #fff";
	  }
	  @return unquote($shadows);
	}
	@for $i from 1 through 5 {
	  $duration: math.div($duration, 2);
	  $count: floor(math.div($count, 2));
	  .layer#{$i} {
	    $size: #{$i}px;
	    position: fixed;
	    width: $size;
	    height: $size;
	    border-radius: 50%;
	    left: 0;
	    top: 0;
	    box-shadow: getShadows($count);
	    animation: moveUp $duration linear infinite;
	    &::after {
	      content: "";
	      position: fixed;
	      left: 0;
	      top: 100vh;
	      border-radius: inherit;
	      width: inherit;
	      height: inherit;
	      box-shadow: inherit;
	    }
	  }
	}
	@keyframes moveUp {
	  to {
	    transform: translateY(-100vh);
	  }
	}
</style>