uniapp星空效果

news2024/11/18 7:30:12

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>