纯CSS实现下雪、下雨、落叶效果
项目实现多种天气效果,js实现操作dom消耗大复杂。用纯css实现
三种效果的HTML写法一样:只需要控制v-for里的100控制雨/雪点/叶子数量
<template><div><div v-for="item of 100" :key="item" class="snowflake"></div></div>
</template>
下雪css:雪球是圆点,控制随即大小、速率
.snowflake {--size: 2vw;width: var(--size);height: var(--size);background: white;border-radius: 50%;position: absolute;top: -5vh;
}@keyframes snowfall {0% {transform: translate3d(var(--left-ini), 0, 0);}100% {transform: translate3d(var(--left-end), 100vh, 0);}
}@for $i from 1 through 100 {.snowflake:nth-child(#{$i}) {--size: #{random(10) * 0.2}vw;--left-ini: #{random(20) - 10}vw;--left-end: #{random(20) - 10}vw;left: #{random(100)}vw;animation: snowfall #{5 + random(10)}s linear infinite;animation-delay: -#{random(10)}s;}
}/* added small blur every 6 snowflakes*/
.snowflake:nth-child(6n) {filter: blur(1px);
}
下雨css:雨滴是长条,控制随机长度宽度,下落速度,大雨可以修改数量,这里用的150
.rainflake {--size: 2px;width: var(--size);height: var(--hsize);border-radius: 200% 200% 0 0;position: absolute;top: -5vh;background: linear-gradient(to bottom,rgba(255, 255, 255, 0.1),rgba(255, 255, 255, 0.6));
}@keyframes rainfall {0% {transform: translate3d(var(--left-ini), 0, 0);}75% {transform: translate3d(var(--left-ini), 100vh, 0);}100% {transform: translate3d(var(--left-end), 100vh, 0);}
}@for $i from 1 through 150 {.rainflake:nth-child(#{$i}) {--size: #{random(10) * 0.2}px;--hsize: #{random(3) * 12}px;--left-ini: #{random(20) - 10}vw;--left-end: #{random(20) - 10}vw;left: #{random(100)}vw;animation: rainfall #{0.5 + random(3)}s linear infinite;animation-delay: -#{random(10)}s;}
}/* added small blur every 6 rainflakes*/
.rainflake:nth-child(6n) {filter: blur(1px);
}
落叶:分为两种形状,渐变色
.leafflake {--size: 3vw;width: var(--size);height: var(--size);position: absolute;top: -5vh;background-image: linear-gradient(135deg,rgb(224, 127, 126),rgb(235, 187, 190));border-radius: var(--radius);
}@keyframes leaffall {0% {transform: translate3d(var(--left-ini), 0, 0);}100% {transform: translate3d(var(--left-end), 100vh, 0);}
}@for $i from 1 through 100 {.leafflake:nth-child(#{$i}) {--size: #{random(10) * 0.2 + 1}vw;--radius: #{($i%2) * 100}px #{(($i + 1) %2) * 100}px;--left-ini: #{random(20) - 10}vw;--left-end: #{random(20) - 10}vw;left: #{random(100)}vw;animation: leaffall #{5 + random(10)}s linear infinite;animation-delay: -#{random(10)}s;}
}/* added small blur every 6 leafflakes*/
.leafflake:nth-child(6n) {filter: blur(1px);
}
实现了三种动态效果
纯CSS实现下雪、下雨、落叶效果相关推荐
- 用纯css模拟下雪的效果
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言 由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
- 纯css模拟下雪效果
效果如其名,想必都见过下雪(可能南方人除外哈哈),但下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果. 1.前言 由于公司产品的活动,需要模拟类似下雪 ...
- java实现展示框,如何使用纯CSS实现蝴蝶标本的展示框效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现蝴蝶标本的展示框效果 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 每日前端实战系列的全部源代码请从 git ...
- 用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法 发布时间:2020-10-26 09:30:20 来源:亿速云 阅读:104 作者:小新 小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
- css三实现ui,纯CSS实现常见的UI效果
原标题:纯CSS实现常见的UI效果 转自:掘金 - alphardex 前言 切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...
- 【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
- css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
- html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
- 纯CSS实现3D正方体动画效果
目录 前言 正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化 总结 前言 纯CSS实现3D正方体动画效果,此方法是通过transf ...
最新文章
- python去哪里学-学Python从哪里开始?
- TCP/IP / SYN 攻击以及解决办法
- OpenCASCADE:OCCT应用框架OCAF之TObj模型对象
- redis一主一从一哨兵,第一次主从切换成功,再次主从切换无法正常执行?
- RabbitMQ单机瞎玩(2)
- 集成CAS单点登录 决策系统的配置以及注意事项
- SQL那些事儿(四)--oracle创建表空间、用户创建
- 深度linux运行浏览器中毒,使用深度Deepin系统的用户可在商店中安装360安全浏览器正式版...
- 《Windows游戏编程大师技巧》一、学海无涯
- 人人商城小程序 用户登录授权接口 wx.getUserProfile后,个别用户出现无法登录的问题
- 用graphviz画树状图(pdf、png)
- 人性的弱点【了解鱼的需求】
- DPI-1047: Cannot locate a 64-bit Oracle Client library
- 一位企业家的成功之道
- 【排障】为什么你发出去的邮件被退回
- png转ico 或如何制作ico文件
- 量子点表面修饰PEG/抗体/金属/细胞膜/无机材料标记与制备
- ff14怎么显示服务器时间,《FF14》8月20日维护到几点 最终幻想14服务器迁移维护公告...
- 怎么把歌曲的格式改成mp3格式?
- 如何将Processon中画好的图转为Visio可以打开并编辑的vsdx格式