编码下的雪景：如何用HTML和JS让雪花在屏幕上舞动

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

效果一

效果二

效果三

要实现这样的雪花效果，非常简单，只需要引入一个名为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()
  方法都很简单，一看就懂，不过多描述了。

完整源码下载

点击下方公众号卡片，关注我，回复1014 下载！