这段时间,全国各地都加入了下雪的队伍当中,看着窗外漫天飞雪,想着我的网站上面也来一场雪吧。正琢磨着如何实现,网上突然蹦出来一段下雪的代码,这不正是我要的么?先来看看效果吧。
要实现这样的雪花效果,非常简单,只需要引入一个名为Snowflakes
的js库就可以轻松实现了。
Snowflakes是一个JavaScript 库,用于在HTML页面上创建下雪效果。它使用 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
});
});
点击下方公众号卡片,关注我,回复
1014
下载!