下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯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 infin