uniapp星空效果

背景
实现思路
代码实现
尾巴

背景

之前在网上看到过一个视频，使用纯css实现过一个星空效果。具体出处找不到了，我们按照他那个思路来实现一个类似的效果，还是先上一张图镇楼：
请添加图片描述

实现思路

首先我们这个效果使用的是纯css来实现，但是普通的css肯定很难实现这种效果，这里我们需要用到sass预编译，具体使用可以参考官网教程。
我们的实现思路如下：
1、放置5层由远及近的星空
2、每层星空展示一定数量的星星
3、每层星空展示的星星由远及近由小变大
4、添加向上运动动画，近的运动块，远的运动慢
6、添加流星
7、添加文字
那每层的星星怎么生成了？主要是用到了box-shadow这个属性，这个属性是可以配置多个的，我们只要通过sass的随机函数和循环就能达到一层星空随机生成星星的逻辑。

代码实现

思路有了，直接上代码，主要是css代码

<template><view><!--由远到近5个层次星空--><div class="layer1"></div><div class="layer2"></div><div class="layer3"></div><div class="layer4"></div><div class="layer5"></div><div class="title">永恒荣耀,不灭星辰</div><div class="meteor"></div></view>
</template><script>export default {data() {return {}},methods: {}}
</script><style lang="scss">page {width: 100%;height: 100%;background-color: black;}.title {//text裁剪background-clip: text;//兼容chrome以外的浏览器-webkit-background-clip: text;color: transparent;width: 100vw;height: 100vh;text-align: center;line-height: 100vh;font-size: 26px;background-color: #c5c5c5;letter-spacing: 5px;font-weight: bold;}//根据数量来生成shadows@function getShadows($n){//每一个shadow对应一个小星星$shadows: unquote('#{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)}$duration: 400s;//小星星运动的动画时间$count: 600;//每层星空的小星星数，为保证性能，这里建议设置不超过1000//通过for循环来生成5层星空@for $i from 1 through 5 {$duration: $duration / 2;//离屏幕越近，运动越快$count: floor($count / $i);//离屏幕越近，星星数越少.layer#{$i} {$size: #{$i}px;//离屏幕越近星星越大position: fixed;width: $size;height: $size;border-radius: 50%;left: 0;top: 0;//通过多个shadow来达到生层本层星空星星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);}}$color: orange;//流星拖尾.meteor {width: 3px;height: 36px;background: linear-gradient(0deg, $color 0, transparent 100%);position: absolute;top: 70px;transform: rotate(45deg);right: 70px;opacity: 0;animation: streak 2s linear infinite;//伪类实现发光头部&::after {content: "";position: absolute;width: 6px;height: 6px;border-radius: 50%;background: $color;filter: blur(1.8px);box-shadow: 0px -1px -1px 5px transparent;bottom: -4px;left: 50%;transform: translate(-50%);}}@keyframes streak {0% {transform: rotate(50deg) translateY(-100px) scale(0.5);opacity: 0;}70% {opacity: 1;transform: rotate(50deg) translateY(120px) scale(1.1);}100% {transform: rotate(50deg) translateY(220px) scale(0.5);opacity: 0;}}
</style>