在本文中，我们本着闲着也是闲着的想法，写了一个下雨效果，让我们一起来了解如何使用JavaScript和CSS创建一个简单的雨滴动画。我们将逐行分解代码，并添加注释来解释每个步骤的作用。
示例代码
//当文档加载完成时，执行函数
document.addEventListener('DOMContentLoaded', function() {
//创建一个div元素作为容器
const container = document.createElement('div');
//设置容器的CSS样式
container.style.position = 'relative';
container.style.width = '100%';
container.style.height = '100%';
//将容器添加到body元素中
document.body.appendChild(container);
//创建一个样式标签元素
const style = document.createElement('style');
//将CSS样式添加到样式标签中
style.innerHTML = `
.raindrop {
position: absolute;
top: -20px;
//使用calc函数设置左侧位置为一个随机值
left: calc(100% * var(--random-x));
//设置动画效果
animation: fall 1.5s linear infinite;
}
@keyframes fall {
//雨滴的起始位置
0% {
transform: translate(0, 0);
}
//雨滴的终止位置
100% {
transform: translate(0, 100vh);
}
}
`;
//将样式标签添加到容器中
container.appendChild(style);
//使用setInterval函数每100毫秒创建一个新的雨滴元素
setInterval(() => {
const drop = document.createElement('div');
//将Unicode字符☔添加到雨滴元素中
drop.innerHTML = '☔'
drop.className = 'raindrop';
//为雨滴元素设置一个随机的左侧位置
drop.style.setProperty('--random-x', Math.random().toFixed(2));
//将雨滴元素添加到容器中
container.appendChild(drop);
//在3秒后将雨滴元素删除
setTimeout(() => {
drop.remove();
}, 3000);
}, 100);
});
代码解释：
- 通过
document.addEventListener函数监听文档的DOMContentLoaded事件，确保页面加载完成后再执行下面的代码。 - 使用
document.createElement函数创建一个div元素，并使用container.style来设置容器的position、width和height样式属性。 - 将容器添加到页面的
body元素中，使其覆盖整个屏幕。 - 创建一个
style元素，使用style.innerHTML添加CSS样式到样式标签中。 - 在CSS样式中，定义了一个名为
raindrop的类，用于描述雨滴元素的样式，包括position、top、left和animation属性 - 在CSS样式中，定义了一个
@keyframes规则，用于描述动画的关键帧，包括雨滴元素的起始和终止位置，使用transform属性实现动画效果。 - 将样式标签添加到容器中，使其生效。
- 使用
setInterval函数每100毫秒创建一个新的雨滴元素，并在其中添加div元素，设置其内容为Unicode字符☔，设置其class为raindrop。 - 使用
drop.style.setProperty函数为每个雨滴元素设置一个随机的--random-x变量，控制其左侧位置。 - 将新创建的雨滴元素添加到容器中。
- 使用
setTimeout函数，在3秒后将每个雨滴元素从容器中删除，以避免页面中出现太多元素。
以上就是使用JavaScript和CSS创建一个简单的雨滴动画的过程。可以根据需要对代码进行修改和优化，以实现更加复杂和美观的动画效果。
完整代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 100vh;
}
</style>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.createElement('div');
container.style.position = 'relative';
container.style.width = '100%';
container.style.height = '100%';
document.body.appendChild(container);
const style = document.createElement('style');
style.innerHTML = `
.raindrop {
position: absolute;
top: -20px;
left: calc(100% * var(--random-x));
animation: fall 1.5s linear infinite;
}
@keyframes fall {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 100vh);
}
}
`;
container.appendChild(style);
setInterval(() => {
const drop = document.createElement('div');
drop.innerHTML = '☔'
drop.className = 'raindrop';
drop.style.setProperty('--random-x', Math.random().toFixed(2));
container.appendChild(drop);
setTimeout(() => {
drop.remove();
}, 3000);
}, 100);
});
</script>
</body>
</html>
