烟花晚霞星空特效-vue

原创

于 2021-01-29 13:04:29 发布 · 置顶 · 4.5k 阅读

51 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #html

本文通过Vue实现了一种烟花晚霞星空的视觉效果，利用CSS3动画和JavaScript随机函数创建逼真的星空背景，并介绍了如何叠加烟花特效。代码中详细解释了星星的生成、位置和旋转设置，同时分享了在Vue项目中引入烟花特效的简单方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

烟花晚霞星空效果图-vue：
在这里插入图片描述

源代码:

<template>
	<div class="body">
		<div class="stars" ref="starsRef">
			<div class="star" v-for="(item, index) in starsCount" :key="index"></div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				starsCount: 800, //星星数量
				distance: 900, //间距
			}
		},
		mounted() {
			console.log(this.$refs.starsRef.children);
			let starNodes = Array.from(this.$refs.starsRef.children);
			starNodes.forEach((item) => {
				let speed = 0.2 + Math.random() * 1;
				let thisDistance = this.distance + Math.random() * 300;
				item.style.transformOrigin = `0 0 ${thisDistance}px`;
				item.style.transform =
					`
		        translate3d(0,0,-${t