html樱花飘落代码复制
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>樱花飘落</title>
<style>
body {
margin: 0;
overflow: hidden;
}
.sakura {
position: absolute;
background-color: pink;
border-radius: 50%;
animation: fall linear infinite;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
</style>
</head>
<body>
<script>
// 创建樱花
function createSakura() {
const sakura = document.createElement('div');
sakura.className = 'sakura';
sakura.style.width = `${Math.random() * 10 + 5}px`;
sakura.style.height = `${Math.random() * 10 + 5}px`;
sakura.style.left = `${Math.random() * window.innerWidth}px`;
document.body.appendChild(sakura);
// 设置随机动画延迟，使樱花有错落感
sakura.style.animationDuration = `${Math.random() * 2 + 4}s`;
sakura.style.animationDelay = `-${Math.random() * 4}s`;
// 监听动画结束事件，重新创建樱花
sakura.addEventListener('animationend', () => {
document.body.removeChild(sakura);
createSakura();
});
}
// 创建一些樱花
for (let i = 0; i < 20; i++) {
createSakura();
}
</script>
</body>
</html>
这段代码使用了HTML和CSS创建一个基本的页面结构，并使用JavaScript动态生成樱花元素。樱花的样式和动画效果由CSS控制，通过JavaScript创建多个樱花元素，使它们在页面上飘落。你可以根据需要调整代码中的参数和样式以满足你的要求。
如果你想要增加或调整樱花的数量、大小、颜色等属性，可以在JavaScript部分进行修改。
javascript<script>
// 创建樱花
function createSakura() {
const sakura = document.createElement('div');
sakura.className = 'sakura';
sakura.style.width = `${Math.random() * 10 + 5}px`;
sakura.style.height = `${Math.random() * 10 + 5}px`;
sakura.style.left = `${Math.random() * window.innerWidth}px`;
sakura.style.backgroundColor = getRandomColor(); // 设置随机颜色
document.body.appendChild(sakura);
// 设置随机动画延迟，使樱花有错落感
sakura.style.animationDuration = `${Math.random() * 2 + 4}s`;
sakura.style.animationDelay = `-${Math.random() * 4}s`;
// 监听动画结束事件，重新创建樱花
sakura.addEventListener('animationend', () => {
document.body.removeChild(sakura);
createSakura();
});
}
// 生成随机颜色
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 创建更多樱花，可以根据需要调整数量
for (let i = 0; i < 50; i++) {
createSakura();
}
</script>
在这个修改后的代码中，我添加了一个getRandomColor函数，用于生成随机颜色，并在createSakura函数中设置了樱花的背景颜色。此外，我将创建樱花的循环次数增加到50次，以生成更多的樱花。
你可以根据自己的需要进一步调整这些参数，以实现你想要的樱花飘落效果。希望这对你有帮助！
