uniapp星空效果
背景
之前在网上看到过一个视频，使用纯css实现过一个星空效果。具体出处找不到了，我们按照他那个思路来实现一个类似的效果，还是先上一张图镇楼：
实现思路
首先我们这个效果使用的是纯css来实现，但是普通的css肯定很难实现这种效果，这里我们需要用到sass预编译，具体使用可以参考官网教程。
我们的实现思路如下：
1、放置5层由远及近的星空
2、每层星空展示一定数量的星星
3、每层星空展示的星星由远及近由小变大
4、添加向上运动动画，近的运动块，远的运动慢
6、添加流星
7、添加文字
那每层的星星怎么生成了？主要是用到了box-shadow这个属性，这个属性是可以配置多个的，我们只要通过sass的随机函数和循环就能达到一层星空随机生成星星的逻辑。
代码实现
思路有了，直接上代码，主要是css代码
javascript
<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>注意这里流星我只加了一个，用来展示流星效果，实际可以根据你逻辑来展示多个流星，再增加一些随机算法，让流星偶尔出现就行。
尾巴
今天的文章就到这里了，希望能给大家帮助，如果喜欢我的文章，欢迎给我点赞，评论，关注，谢谢大家！