下雨遮挡效果raindrop
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Raindrop</title> <style> html,body { padding: 0px; margin: 0px; height: 100%; overflow: hidden; background: black; font-family: 'Gayathri', sans-serif; } #rain { position: absolute; left: 0px; top: 0px; user-select: none; } h1 { text-align: center; margin-top: 130px; font-size: 42px; position: relative; color: white; } #options { text-align: center; margin-top: 50px; position: relative; z-index: 2; } #options button { padding: 20px; font-size: 22px; margin-left: 20px; margin-right: 20px; border-radius: 5px; cursor: pointer; background: white; border: 1px solid #95a5a6; } @media only screen and (max-width: 600px) { .raindrop:nth-child(3) { display: none; } } </style> </head> <body translate="no"> <canvas id="rain"></canvas> <div id="container"> <h1>下雨遮挡效果</h1> <div id="options"> <button class="raindrop">关于我们</button> <button class="raindrop">了解更多</button> <button class="raindrop">关于</button> </div> </div> <script> var c = document.getElementById("rain"); c.width = window.innerWidth; c.height = window.innerHeight; var ctx = c.getContext("2d"); let rainDrops = []; let elements = document.getElementsByClassName("raindrop"); let length = 30; let speed = 15; let angle = 90 * Math.PI / 180; let angleSin = Math.sin(angle); let angleCos = Math.cos(angle); let spawnInterval = setInterval(newDrop, 50); window.addEventListener("resize", onResize); document.addEventListener("visibilitychange", function () { if (document.hidden) { clearInterval(spawnInterval); } else { spawnInterval = setInterval(newDrop, 50); } }); function RainDrop(x, y, angle) { this.x = x; this.y = y; rainDrops.push(this); } function newDrop() { for (let x = 0; x < 50; x++) { new RainDrop(Math.random() * c.width, -40 - 100 * Math.random(), angle); } } update(); function update() { for (let x = 0; x < rainDrops.length; x++) { let drop = rainDrops[x]; drop.x += speed * angleCos; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0