css+js做随意移动的水滴背景
发布人：shili8
发布时间：2024-11-07 09:07
阅读次数：0
**CSS + JS 实现随意移动的水滴背景**
在本文中，我们将使用 CSS 和 JavaScript 来实现一个随意移动的水滴背景。这个效果可以用来增强网页的视觉效果，给用户带来更好的浏览体验。
### HTML 结构首先，我们需要定义 HTML 的结构。我们会创建一个容器元素，用于放置我们的水滴背景。
html<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随意移动的水滴背景</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="water-container"></div> <script src="script.js"></script> </body> </html>
### CSS 样式接下来，我们需要定义 CSS 样式来实现水滴背景的效果。我们会使用 `linear-gradient` 来创建水滴的颜色渐变效果。
css/* style.css */
.water-container {
position: absolute;
top:0;
left:0;
width:100%;
height:100vh;
background-image: linear-gradient(to bottom, #3498db, #2ecc71);
}
.water-drop {
position: absolute;
border-radius:50%;
background-color: #fff;
box-shadow:0010px rgba(255,255,255,0.5);
}
### JavaScript 脚本现在，我们需要编写 JavaScript 脚本来实现水滴的随意移动效果。我们会使用 `requestAnimationFrame` 来更新水滴的位置。
javascript// script.jsclass WaterDrop {
constructor(x, y) {
this.x = x;
this.y = y;
this.radius = Math.random() *20 +10;
this.speedX = Math.random() *2 -1;
this.speedY = Math.random() *2 -1;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x < 0 || this.x > window.innerWidth) {
this.speedX *= -1;
}
if (this.y < 0 || this.y > window.innerHeight) {
this.speedY *= -1;
}
}
draw(ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius,0, Math.PI *2);
ctx.fillStyle = '#fff';
ctx.fill();
}
}
let waterDrops = [];
let ctx;
function init() {
const container = document.querySelector('.water-container');
ctx = container.getContext('2d');
for (let i =0; i < 100; i++) {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
waterDrops.push(new WaterDrop(x, y));
}
requestAnimationFrame(loop);
}
function loop() {
ctx.clearRect(0,0, window.innerWidth, window.innerHeight);
for (const drop of waterDrops) {
drop.update();
drop.draw(ctx);
}
requestAnimationFrame(loop);
}
init();
### 结果通过以上的 CSS 和 JavaScript 脚本，我们实现了一个随意移动的水滴背景。这个效果可以用来增强网页的视觉效果，给用户带来更好的浏览体验。
注意：上述代码示例仅供参考，请自行测试和调整以适应您的具体需求。
粤公网安备 44011102002787号