用纯css模拟下雪的效果
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥。
1、前言
由于公司产品的活动,需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas(还有gif),对比下css3和canvas的优缺点:
动画自由度:canvas胜;
复杂度:canvas胜;
兼容性:canvas胜;
性能:css3胜(requestAnimationFrame和硬件加速)。
由于对于性能有一定的要求,canvas对比css3会有更多的计算量导致性能可能不太好,所以选用css3模拟下雪效果(ps:能用css解决的问题就不用JavaScript解决哈哈)。
2、原理
本文所采用的是css3的animation。为dom元素添加animation属性就可以模拟动画,例如w3school的例子:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>animation</title> <style> .animation{ width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; } @keyframes mymove{ from { left:0px; } to { left:200px; } }</style></head><body> <div></div></body></html>
当然这谁都会,但有个问题是,下雪并不是机械的下落,而是有快有慢、摆动幅度、时间不定,这里的重点是需要构造随机性,理性分析下。
在浏览器中下雪的起始点随机;
下雪的速度随机;
下雪从开始到落到地面的时间随机(延时随机和整个下雪过程的时间随机);
下雪过程中摇摆随机。
我们可以在css中找到这几点随机性的对应属性:
起始点:position的左右方位(动画我们一般采用定位,因为可以减少不必要的重排和重绘);
速度:animation-timing-function(提供了丰富的速度属性);
时间:animation-duration和animation-delay;
摇摆:transform: translateX()(在水平方向上的位移)。
可能有人会问,这几个属性并不是随机的呀,并不像Math.random随机函数那样。我们换个思考方向,本文所说的随机是随机雪,并不是随机雪的属性。
每个雪的下落时间、下落速度、摆动幅度是固定的,雪与雪之间的下落时间、下落速度、摆动幅度是不同,那么就达到效果了。
意识到这点,就剩下最后一个问题,怎样给每个雪不同的下落时间、下落速度、摆动幅度呢?这里我们使用真正的随机函数Math.random,利用data自定义属性配合Math.random和css的属性匹配规则,就可以确定动画效果了。
3、构造雪形状
3.1 一条线性渐变
.linear{ width: 100px; height: 100px; background: linear-gradient(0, green 40%, red 40%, red 60%, green 60%);}
3.2 多条线性渐变画雪花
.linear{ width: 100px; height: 100px; border-radius: 50%; background-image: linear-gradient(0, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%), linear-gradient(45deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%), linear-gradient(90deg, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%), linear-gradient(135deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%);}
4、构造下雪动画
我用sass写的css来构造动画,其实语言无所谓,重在原理。
4.1 起始点
@for $i from 1 through 100 { .animation[>'#{$i}'] { left: #{$i}vw; }}
这里运用sass的循环函数来创造1到100的匹配class名为animation和属性选择器为[>
范围1~100vw:注意单位是vw,我们想要雪花的起始点出现在水平方向的任意位置,而vw是把屏幕等分为100份,100vw就是满屏;
为什么要把1~100都循环出来:只有这样才能匹配到范围内我们需要的值。
4.2 速度
$timing: ( linear: linear, ease: ease, ease-in: ease-in, ease-out: ease-out, ease-in-out: ease-in-out);
@each $key, $value in $timing { .animation[>'#{$key}'] { transition-timing-function: $value; }}
4.3 时间
时间包含动画运动时间和延时时间。
@for $i from 1 through 4 { .animation[>'#{$i}'] { animation-delay: #{$i}s; }}@for $i from 4 through 8 { .animation[>'#{$i}'] { animation-duration: #{$i}s; }}
4.4 摇摆
下雪由两个动画组成,分别是下落fall和摇摆swing,下落的动画是固定的,只有摇摆需要随机,所以我自定义了属性匹配规则,就可以随机摇摆了。
@for $i from 1 through 4 { .animation[>'#{$i}'] { animation-name: fall, swing#{$i}; }}@for $i from 1 through 4 { @keyframes swing#{$i}{ 25% { transform: translateX(-#{$i * 10}px); } 50% { transform: translateX(#{$i * 10}px); } 75%{ transform: translateX(-#{$i * 10}px); } 100%{ transform: translateX(#{$i * 10}px); } }}
5、随机性
这里用react来演示代码,还是那句话只要理解了原理,语言其实并不太重要。
5.1 雪花元素
<div className='page'> { Array(10).fill().map((v, i) => ( <span key={i} className='animation span' >{this.position()} >{this.timing()} >{this.delay()} >{this.duration()} >{this.name()} /> )) }</div>
我们的雪花元素包含几下几个属性值:
5.1 随机范围函数
random(min, max){ return Math.floor(Math.random() * (max - min + 1) + min)}
5.2 属性随机赋值
position(){ return this.random(1, 100)}delay(){ return this.random(1, 4)}duration(){ return this.random(4, 8)}name(){ return this.random(1, 4)}timing(){ return ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'][this.random(0, 4)]}
本文完〜
用纯css模拟下雪的效果相关推荐
- 纯css模拟下雪效果
效果如其名,想必都见过下雪(可能南方人除外哈哈),但下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果. 1.前言 由于公司产品的活动,需要模拟类似下雪 ...
- html字体效果标签,纯CSS模拟fieldset标签效果把文字写在边框上
HTML里面有一个标签fieldset,可以实现文字写在边框上,今天项目想实现一个类似效果,并要求自定义边框上文字距离一侧的距离.下面青岛星网跟大家分享下纯CSS的实现方法. 先看下效果 HTML部分 ...
- 纯CSS实现下雪、下雨、落叶效果
项目实现多种天气效果,js实现操作dom消耗大复杂.用纯css实现 三种效果的HTML写法一样:只需要控制v-for里的100控制雨/雪点/叶子数量 <template><div&g ...
- 不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果 原文:不可思议的纯 CSS 实现鼠标跟随效果 直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
- 纯CSS制作的图形效果
纯CSS制作的图形效果 很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
- css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码,本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码 本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
- CSS模拟实现色阶效果
CSS模拟实现色阶效果,对各种版本的浏览器兼容性考虑的挺周全,在兼容性方面出色,这个只是模拟色阶的效果,显示出不同的色块的深浅颜色,并标识出来英文的颜色名称,其实技术方面不太难,只是有些麻烦,非常感谢 ...
- HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果,css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴 本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效 ...
- HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白 一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
最新文章
- android相对布局底部对齐,Android,在edittext中输入时防止相对布局底部对齐的按钮向上移动...
- settimeout需要清除吗_钢结构抛丸机可以清理结构件上的焊渣吗?
- 世界上公认最难的十大学科
- TensorFlow贡献者黄文坚:解读对比13个深度学习框架后的选择
- 喜报 | 大地影院集团签约神策数据,影院 + 数据化高光时刻开启
- elementUI vue table status的状态列颜色变化和操作列状态显示(停用, 启用)
- python代替javascript_Pyjamas - 用python代替javascript编写基于浏览器的应用
- 去重除了indexOf的其他方法(使用对象Key的方法)及统计重复次数
- 经纬度转换为平面坐标
- 扎克伯格为女儿选的量子物理学童书 你看得懂不?
- 13. Element childNodes 属性
- 【学习0605】NVIDIA DRIVE AGX Developer Kit - How to set up
- XPath详解,总结
- vue-element-template模板添加登录页面自定义背景
- 3S基础知识:MapInfo教程--二次开发入门
- java自动机字符串匹配_字符串匹配之有限自动机
- Maven Helper
- 浅谈估值模型:实现GGM的理想国(附代码)
- MOS管做二极管使用
- java 根据word文档模板导出word