一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

我慢慢的听雪落下的声音，闭着眼睛幻想它不会停~~~~美好的事物总是短暂的，不如自己动手实现一个雪花落下的场景吧。如图实现一个雪花飘飘的效果。大大小小不一的雪花从左上落下，还是很有意境的。

一：技术分析

CSS3有3种和动画相关的属性：transform, transition, animation。其中 transform 描述了元素静态样式。所以transform 常常配合后两者使用。而transition 和 animation 都可以实现动画效果。

1、transform

transform 用于元素的2D或3D转换。可将元素旋转，缩放，移动，倾斜等。必须是鼠标移上或者点击执行属性变化，鼠标离开属性回归。说到底就是属性不会变化。常常配合-webkit-transition: 0.3s;transition: 0.3s;才会有动画的效果，否则会很生硬。

主要属性：

旋转

rote(30deg) 水平面以元素中心旋转多少度；

rotateX(angle) 定义沿着 X 轴的 3D 旋转；

rotateY(angle) 定义沿着 Y 轴的 3D 旋转；
位移

translate(x,y) 定义 2D 转换;

translate3d(x,y,z) 定义 3D 转换;
缩放

scale(x,y) 定义 2D 缩放转换;

scale3d(x,y,z) 定义 3D 缩放转换;

2.animation

在前一篇文章介绍过，本文不再赘述。

3.两者的区别

触发条件不同。 transition通常和hover等事件配合使用，由事件触发。animation则是立即播放。
循环。animation可以设定循环次数。
精确性。animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性，transition中所有样式属性都要一起变化。
与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果。

二：代码实现

主要用到一个雪花的图片，利用随机数获得一批不同大小的雪花，给他们加上transform移动，通过移动雪花的位置来实现雪花落下的效果。

1. 定义雪花

// 雪花
function flake() {
    var img = document.createElement('img');
    var h = document.documentElement.clientHeight;
    var w = document.documentElement.clientWidth;
    var left = Math.random() * w;// 获取随机小数
    var top = Math.random() * h;
    // 添加雪花，设置属性
    document.body.appendChild(img);
    img.src = ' flake.png';
    img.style.position = 'absolute';
    img.style.left = left + 'px';
    img.style.top = top + 'px';
    // 设置雪花的大小不一
    img.style.transform = 'scale(' + Math.random() / 2 + ')';
}

2. 雪花移动事件

// 雪花落下事件
function down() {
    left += Math.random() * 10;
    top += Math.random() * 5;
    // 重新赋值
    if(left > w ) left =- 100;
    if(top > h) top =- 100;
    img.style.left = left + 'px';
    img.style.top = top + 'px';
}
setInterval(down,50);

3. 生成多个雪花

// 生成多个雪花
for(var i = 0;i < 50; i++){
    new flake();
}

代码是不是很简单呢。就可以实现雪花飘飘的效果了，快动手试试吧！

我慢慢的听雪落下的声音-css实现雪花飘飘