vue3 实现满天星动态效果

最新推荐文章于 2023-08-03 15:17:16 发布

sout-lanys

最新推荐文章于 2023-08-03 15:17:16 发布

阅读量763

点赞数

分类专栏： Vue3 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_44697754/article/details/130703803

版权

Vue3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

概述

最近在刷抖音时，看到了某位大佬发的vue实现满天星动态效果，感觉不错，顺便照做写在了我的demo上。

实现效果

在这里插入图片描述

实现

HTML

<template>
   <div  class="star">
      <div class="dot" v-for="item in nums" :key="item" :style="`--delay:${Math.random() * 2}s;--color:hsl(${Math.random() * 360},50%,50%)`">
		</div>
	</div>	
</template>

JS

<script setup lang="ts">
import { ref, computed } from 'vue'
const nums = computed(()=>{
	return Math.floor(window.innerWidth / 10)
})
</script>

CSS

<style lang="scss" scoped>

.star {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #000;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.dot {
	width: 5px;
	height: 5px;
	background-color: var(--color);
	border-radius: 50%;
	animation: up 2s ease-in infinite;
	animation-delay: var(--delay);
	z-index:1;
}

@keyframes up {
	to {
		transform: translateY(-100vh);
	}
}
</style>