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

2025-10-20 12:15:58

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

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

2、新建html文档。

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

3、书写hmtl代码。

<body onLoad="demo();">

<img id="demo2" src="" src="images/123312.jpg" />

<div id="cholder">

<canvas id="canvas"></canvas>

</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代码。

<script >

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。
猜你喜欢