下面是一个示例代码，展示如何使用PHP和HTML/CSS来模拟雨滴的动态效果：
html复制代码
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<style> |
|
#rain { |
|
position: relative; |
|
height: 400px; |
|
background-color: #000; |
|
} |
|
.raindrop { |
|
position: absolute; |
|
height: 5px; |
|
width: 5px; |
|
background-color: #fff; |
|
border-radius: 50%; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="rain"></div> |
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|
<script> |
|
$(document).ready(function() { |
|
function dropRain() { |
|
for (let i = 0; i < 100; i++) { |
|
setTimeout(function() { |
|
let x = Math.random() * 400; // 随机生成雨滴的x坐标 |
|
let y = Math.random() * 200; // 随机生成雨滴的y坐标 |
|
let size = Math.random() * 3 + 1; // 随机生成雨滴的大小 |
|
let speed = Math.random() * 2 + 1; // 随机生成雨滴的速度 |
|
let color = '#' + Math.floor(Math.random() * 16777215).toString(16); // 随机生成雨滴的颜色 |
|
$('#rain').append('<div class="raindrop" style="left: ' + x + 'px; top: ' + y + 'px; width: ' + size + 'px; height: ' + size + 'px; background-color: ' + color + '; opacity: ' + (speed * 0.1) + ';"></div>'); // 在页面上添加雨滴元素 |
|
}, i * 100); // 每100毫秒添加一个雨滴 |
|
} |
|
} |
|
setInterval(dropRain, 100); // 每100毫秒重新生成雨滴 |
|
}); |
|
</script> |
|
</body> |
|
</html> |
这段代码创建了一个简单的黑色背景容器，用于模拟雨滴下落的效果。通过JavaScript，我们使用setTimeout函数在页面上随机位置生成雨滴，并使用CSS样式来设置雨滴的大小、颜色和透明度。然后，使用setInterval函数每100毫秒重新生成雨滴，以创建动态效果。
