1. 实现效果
GIF录屏文件太卡有点卡,实际是很丝滑的文章来源:https://www.toymoban.com/news/detail-806448.html
文章来源地址https://www.toymoban.com/news/detail-806448.html
2. 编写一个下雪效果组件 VabSnow.vue
- 在
src
下新建components
文件,创建VabSnow.vue
组件文件
<template>
<div class="content" :style="styleObj">
<div v-for="(item, index) in 200" :key="index" class="snow"></div>
</div>
</template>
<script>
export default {
name: 'VabSnow',
props: {
styleObj: {
type: Object,
default: () => {
return {}
},
},
},
data() {
return {}
},
created() {},
mounted() {},
methods: {},
}
</script>
<style lang="scss" scoped>
.content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
filter: drop-shadow(0 0 10px white);
}
@function random_range($min, $max) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
@return $random_range;
}
.snow {
$total: 200;
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
@for $i from 1 through $total {
$random-x: random(1000000) * 0.0001vw;
$random-offset: random_range(-100000, 100000) * 0.0001vw;
$random-x-end: $random-x + $random-offset;
$random-x-end-yoyo: $random-x + ($random-offset / 2);
$random-yoyo-time: random_range(30000, 80000) / 100000;
$random-yoyo-y: $random-yoyo-time * 100vh;
$random-scale: random(10000) * 0.0001;
$fall-duration: random_range(10, 30) * 1s;
$fall-delay: random(30) * -1s;
&:nth-child(#{$i}) {
opacity: random(10000) * 0.0001;
transform: translate($random-x, -10px) scale($random-scale);
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
}
@keyframes fall-#{$i} {
#{percentage($random-yoyo-time)} {
transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
}
to {
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
}
}
}
}
</style>
3. 页面使用
<template>
<div class="home">
<div class="body">
<VabSnow />
</div>
</div>
</template>
<script>
import VabSnow from '@/components/VabSnow' //引入组件
export default {
name: 'Demo',
components: {
VabSnow,
},
}
</script>
<style scoped lang="scss">
.home {
.body {
width: 890px;
height: 500px;
border: #030303 solid 10px;
box-sizing: border-box;
box-sizing: border-box;
}
}
</style>
4. 注意点
- 没啥注意的,主要是scss的变量操作及css动画 😎
到了这里,关于011:vue结合css动画animation实现下雪效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!