011:vue结合css动画animation实现下雪效果

文章目录

  • 1. 实现效果
  • 2. 编写一个下雪效果组件 `VabSnow.vue`
  • 3. 页面使用
  • 4. 注意点

1. 实现效果

GIF录屏文件太卡有点卡,实际是很丝滑的

请添加图片描述

2. 编写一个下雪效果组件 VabSnow.vue

  1. 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. 注意点

  1. 没啥注意的,主要是scss的变量操作及css动画 😎

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/631942.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React16源码: React中的FunctionComponent的源码实现

Function Component 1 &#xff09;概述 FunctionComponent 是引出调和子节点的过程调和子节点是一个统一的过程&#xff0c;和各类组件不同类型没有太大关系 在 ReactDOM.render 第一次时&#xff0c;只有一个Fiber对象这个Fiber对象它会保存它的props, 里面有很多的childre…

【网络安全知识】5种较流行的网络安全框架及特点分析

网络安全框架主要包括安全控制框架&#xff08;SCF&#xff09;、安全管理框架&#xff08;SMP&#xff09;和安全治理框架&#xff08;SGF&#xff09;等类型。 对于那些希望按照行业最佳实践来开展网络安全能力建设的企业来说&#xff0c;理解并实施强大的网络安全框架至关重…

雍禾植发为地球种下发际线,雍禾医疗以公益名义为消费者种下希望

“绿水青山才是金山银山”&#xff0c;绿色现已成为新时代中国的鲜明底色。天更蓝&#xff0c;水更清&#xff0c;人与环境和谐发展已深入人心。位于内蒙古自治区阿拉善盟西部的额济纳旗常年干旱少雨&#xff0c;风沙肆虐&#xff0c;这里亟需被植上一片森林&#xff0c;为地球…

使用Spring管理Caffeine缓存(CacheManager+Caffeine)

1 依赖 使用Spring管理Caffeine缓存的主要pom依赖如下所示。 <dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.2.8.RELEASE</version> </dependency><dependency…

介绍 sCrypt:BTC 的 Layer-1 智能合约框架

在 TypeScript 中开发 BTC 智能合约 我们非常高兴地推出 sCrypt&#xff1a;一种现代 Typescript 框架&#xff0c;用于在 BTC 上开发第一层智能合约&#xff0c;无需分叉。 现在&#xff0c;人们可以使用现代开发工具在易于使用的统一框架中编写、测试、调试、部署和调用智能合…

Microsoft Word 删除空行

Microsoft Word 删除空行 1. 删除空行1.1. 替换1.2. 段落标记 References 1. 删除空行 1.1. 替换 1.2. 段落标记 特殊格式 -> 段落标记 References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

DQN、Double DQN、Dueling DQN、Per DQN、NoisyDQN 学习笔记

文章目录 DQN (Deep Q-Network)说明伪代码应用范围 Double DQN说明伪代码应用范围 Dueling DQN实现原理应用范围伪代码 Per DQN (Prioritized Experience Replay DQN)应用范围伪代码 NoisyDQN伪代码应用范围 部分内容与图片摘自&#xff1a;JoyRL 、 EasyRL DQN (Deep Q-Networ…

RAM读写测试

真双口RAM读写测试 IP核设置如下 注意点是&#xff1a; 1、wea信号位宽由于选择了32bit地址&#xff0c;导致使能了按字节写入&#xff0c;因此wea每一位对应一个8bit的din&#xff0c;高有效&#xff1b; 2、rsta 信号指RAM复位置位信号&#xff0c;高有效&#xff0c;但是…

Altium Designer简介以及下载安装

阅读引言&#xff1a; Altium Designer的离线安装包在文章最后&#xff0c; 注意该软件只能用于个人的学习使用&#xff0c; 不能用于商业用途&#xff0c; 文章主题图片来自网络。 一、Altium Designer简介 Altium Designer是一款功能强大的电子设计自动化&#xff08;EDA&…

【GAMES101】Lecture 07 着色(shading)

目录 着色 Blinn-Phong反射模型 漫反射 光衰减 着色 这个着色&#xff08;shading&#xff09;就是将不同的材质应用到不同的物体上&#xff0c;像一个物体&#xff0c;它可以是木头的、金属的、塑料的…… Blinn-Phong反射模型 我们来看一个简单的着色模型&#xff0c;…

导航相关知识3

接下来看下引导模块 从三个方面来写吧&#xff0c;绘制&#xff0c;回调&#xff0c;用户操作 绘制&#xff1a; 自定义绘制 各种图标&#xff0c;参考点的调整&#xff0c;主要注意点是防止未释放导致的泄露 PrepareLayerStyleInner这个类里包含了app和sdk交互的绘制接口&…

冻结Prompt微调LM: PET(b) LM-BFF

PET-TC(B) paper b: 2020.9 It’s not just size that matters: Small language models are also few-shot learners. Prompt&#xff1a; 多字完形填空式人工Prompt Task&#xff1a;Text Classification Model: Albert-xxlarge-v2 Take Away: 支持多字的完形填空Prompt&a…

基于DQN和TensorFlow的LunarLander实现(全代码)

使用深度Q网络&#xff08;Deep Q-Network, DQN&#xff09;来训练一个在openai-gym的LunarLander-v2环境中的强化学习agent&#xff0c;让小火箭成功着陆。 下面代码直接扔到jupyter notebook或CoLab上就能跑起来。 目录 安装和导入所需的库和环境Q网络搭建经验回放实现DQNAge…

【算法Hot100系列】字母异位词分组

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

环境变量配置文件

1.配置文件简介 source命令 source命令通常用于保留、更改当前shell中的环境变量。 格式&#xff1a; source 配置文件 . 配置文件 环境变量配置文件简介 环境变量配置文件中主要是定义对系统的操作环境生效的系统默认环境变量&#xff0c;比如PATH、HISTSI…

(二十)Flask之上下文管理第一篇(粗糙缕一遍源码)

每篇前言&#xff1a; &#x1f3c6;&#x1f3c6;作者介绍&#xff1a;【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者 &#x1f525;&#x1f525;本文已收录于Flask框架从入门到实战专栏&#xff1a;《Flask框架从入…

cmake 自定义宏

cmake 自定义宏 宏定义 add_definitions(-D宏名称 -D宏名称 ...)通过宏定义的方式&#xff0c;对程序中的代码进行控制

Linux 常用命令分享与示例

Linux 是一种强大的操作系统&#xff0c;广泛用于服务器、桌面和移动设备。它的命令行界面&#xff08;CLI&#xff09;提供了许多有用的命令&#xff0c;可以方便地进行系统管理和文件操作。 一、文件操作命令 1、 ls&#xff1a;列出目录中的文件和子目录 ls -l /home这将显…

Vue在组件上使用ref代码及总结

//可以通过 this.$refs将数据用子组件函数传递&#xff0c;在子组件函数接收数据&#xff0c;达到修改数据的目的 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" conten…

Ikuai中如何添加/更换虚拟机(图文)

Ikuai配置 分区/格式化硬盘(如果已经格式化&#xff0c;无需再次格式化&#xff0c;直接传送到上传镜像) 上传镜像 ⚠️&#xff1a;如果是压缩格式&#xff0c;需要解压缩后上传&#xff0c;如这里的IMG格式。 创建虚拟机 配置虚拟机&#xff08;等待虚拟机起来后执行&#…