织梦网站采集如何做,广西企业网站建设,濮阳微信网站建设,wordpress密码解密文章目录 1. 实现效果2. 编写一个下雪效果组件 VabSnow.vue3. 页面使用4. 注意点 1. 实现效果
GIF录屏文件太卡有点卡#xff0c;实际是很丝滑的 2. 编写一个下雪效果组件 VabSnow.vue
在 src 下新建 components 文件#xff0c;创建VabSnow.vue组件文件
template… 文章目录 1. 实现效果2. 编写一个下雪效果组件 VabSnow.vue3. 页面使用4. 注意点 1. 实现效果
GIF录屏文件太卡有点卡实际是很丝滑的 2. 编写一个下雪效果组件 VabSnow.vue
在 src 下新建 components 文件创建VabSnow.vue组件文件
templatediv classcontent :stylestyleObjdiv v-for(item, index) in 200 :keyindex classsnow/div/div
/templatescriptexport default {name: VabSnow,props: {styleObj: {type: Object,default: () {return {}},},},data() {return {}},created() {},mounted() {},methods: {},}
/scriptstyle langscss 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. 页面使用
templatediv classhomediv classbodyVabSnow //div/div
/templatescriptimport VabSnow from /components/VabSnow //引入组件export default {name: Demo,components: {VabSnow,},}
/scriptstyle scoped langscss.home {.body {width: 890px;height: 500px;border: #030303 solid 10px;box-sizing: border-box;box-sizing: border-box;}}
/style
4. 注意点
没啥注意的主要是scss的变量操作及css动画
