这篇博客介绍了如何利用JavaScript和相关插件创建出逼真的雪花飘落背景效果，提升了网页的用户体验。通过引入style.css、jquery-1.7.2.min.js和jquery.let_it_snow.js文件，然后在文档加载完成后配置并调用canvas元素的let_it_snow方法，设置不同的风力、速度、颜色、大小和数量等参数，创建出多层次的雪花飘落动画。
这款插件效果非常的炫酷能大大提升用户的体验度
引用插件：style.css
jquery-1.7.2.min.js
jquery.let_it_snow.js
编写代码：
<script>
$(document).ready(function(){
$("canvas.flare").let_it_snow({
windPower: 0,
speed: 0,
color: "#392F52",
size:120,
opacity: 0.00000001,
count: 40,
interaction: false
});
$("canvas.snow").let_it_snow({
windPower: 3,
speed: 1,
count: 250,
size: 0
});
$("canvas.flake").let_it_snow({
windPower: -3,
speed: 1,
count: 20,
size: 10,
image: "../雪花/images/white-snowflake.png"
});
});
</script>
</head>
<body>
<canvas width="100%" height="100%" class="flare"></canvas>
<canvas width="100%" height="100%" class="snow"></canvas>
<canvas width="100%" height="100%" class="flake"></canvas>
</body>
扫一扫
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
