下面是一个示例代码，展示如何使用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毫秒重新生成雨滴，以创建动态效果。