这段时间，全国各地都加入了下雪的队伍当中，看着窗外漫天飞雪，想着我的网站上面也来一场雪吧。正琢磨着如何实现，网上突然蹦出来一段下雪的代码，这不正是我要的么？先来看看效果吧。

要实现这样的雪花效果，非常简单，只需要引入一个名为Snowflakes的js库就可以轻松实现了。

Snowflakes是一个JavaScript 库，用于在HTML页面上创建下雪效果。它使用 CSS 动画来实现雪花的下落，并提供了多种可配置的参数，可以自定义雪花的形状、大小、速度等。

Snowflakes特点：

• 简单易用：只需包含一个 JavaScript 文件即可使用。

• 可配置性强：提供了多种可配置的参数，可以自定义雪花的效果。

• 性能优异：使用 CSS 动画实现，性能良好。

所以，只要是涉及到雪花的场景，这个库就非常合适。Snowflakes的使用也非常简单，可以使用NPM引入，也可以直接加载js。

NPM安装：

npm i magic-snowflakes --save-dev

效果一实现：

new Snowflakes({
    minSize: 10,
    maxSize: 100,
    color: 'white',
    wind: true});

效果二实现：

new Snowflakes({ color: '#f00' });

效果三实现：

[
    '#FF69B4',
    '#DC143C',
    '#9ACD32',
    '#FF8C00',
    '#7FFFD4',
    '#9370DB',
    '#FFD700'].forEach(function(item) {
    new Snowflakes({
        count: 15,
        maxSize: 60,
        color: item    });});

Snowflakes参数

• container: //雪花容器，默认值: document.body

• count: number; //雪花数量，默认值：50

• color: string; //雪花颜色，默认值: “#5ECDEF”

• minOpacity: number; //最小透明度，默认值: 0.6

• maxOpacity: number; //最大透明的，默认值: 1

• minSize: number; //雪花最小尺寸，默认值: 10

• maxSize: number; //雪花最大尺寸，默认值: 25

• rotation: boolean; //雪花是否旋转，默认值: true

• speed: number; // 下降的速度，默认值: 1

• stop: boolean; // 默认值: false

• types: number; // 默认值: 6

• width?: number; // 默认值: width of container

• height?: number; // 默认值: height of container

• wind: boolean; // 默认值: true

• zIndex: number; // 默认值: 9999,

• autoResize: boolean; // 默认值: true

Snowflakes 方法

• .start()

• .stop()

• .show()

• .hide()

• .resize()

• .destroy()
  方法都很简单，一看就懂，不过多描述了。

完整源码下载