html+css+js实现电脑全屏雨滴效果

2025-10-20 12:15:58

1、准备好需要用到的图标。

2、新建html文档。

html+css+js实现电脑全屏雨滴效果

3、书写hmtl代码。

</div>

</body>

html+css+js实现电脑全屏雨滴效果

4、书写css代码。

<style>

img { display: none; }

body { overflow: hidden; }

#canvas { position: absolute; top: 0px; left: 0px; }

</style>

html+css+js实现电脑全屏雨滴效果

5、书写并添加js代码。

function demo() {

var engine = new RainyDay('canvas','demo2', window.innerWidth, window.innerHeight);

engine.gravity = engine.GRAVITY_NON_LINEAR;

engine.trail = engine.TRAIL_DROPS;

engine.VARIABLE_GRAVITY_ANGLE = Math.PI / 8;

engine.rain([

engine.preset(0, 2, 0.5),

engine.preset(4, 4, 1)

], 50);

}

</script>

html+css+js实现电脑全屏雨滴效果

6、代码整体结构。

html+css+js实现电脑全屏雨滴效果

7、查看效果。

html+css+js实现电脑全屏雨滴效果

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。