vue下雪背景效果(sass实现)

下雪效果一般使用canvas或sass实现，各有优缺点
canvas：雪花大小、位置、路线、速度更加随机，耗内存
sass：每一片雪花雪花大小、位置、路线、速度初始化后不会变、效果流畅丝毫不会卡
显然sass做法性价比更高

效果图

安装sass

npm i sass --save
npm i sass-loader --save

代码实现

<div v-for="item of 500" :key="item" class="snowflake"></div>

<style lang="scss">
	body {
		background-color: black;
	}

	.snowflake {
		--size: 1vw;
		width: var(--size);
		height: var(--size);
		background: url(./snow.png) no-repeat; //雪花图片 也可以画圆
		background-size: 100% 100%;
		position: fixed;
		top: -5vh; //出事高度在屏幕外 效果更真实
		z-index: -10; //背景图层不遮挡上面元素
	}

	@keyframes snowfall {
		100% {
			transform: translate3d(var(--end), 100vh, 0);
		}
	}

	@for $i from 0 through 500 {
		.snowflake:nth-child(#{$i}) {
			//每个雪花的大小
			--size: #{random(6) * 0.08}vw;
			//雪花移动目标点 -70后是负数 这样雪花会向左下方飘落 
			--end: #{random(20) - 70}vw;
			//雪花初始位置 
			left: #{random(150)}vw;
			//雪花从顶到底移动的动画 动画时间可以调整雪花速度
			animation: snowfall #{5 + random(8)}s linear infinite;
			animation-delay: -#{random(10)}s;
		}
	}

</style>