纯css星空动画

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

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

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