html樱花飘落代码
以下是一个简单的HTML樱花飘落代码：
<!DOCTYPE html>
<html>
<head>
<title>樱花飘落</title>
<style>
body {
background-color: #f5f5f5;
overflow: hidden;
}
.petal {
position: absolute;
background-color: #fff;
border-radius: 50%;
opacity: 0.8;
animation: fall 10s linear infinite;
}
@keyframes fall {
0% {
transform: translate(0, -10%);
}
100% {
transform: translate(0, 110%);
}
}
</style>
</head>
<body>
<script>
// 创建樱花瓣
function createPetal() {
const petal = document.createElement('div');
petal.className = 'petal';
petal.style.left = Math.random() * window.innerWidth + 'px';
document.body.appendChild(petal);
// 移除瓣片
setTimeout(() => {
petal.remove();
}, 10000);
}
// 每隔一段时间创建樱花瓣
setInterval(() => {
createPetal();
}, 100);
</script>
</body>
</html>
这个代码使用了CSS动画和JavaScript来实现樱花瓣的飘落效果。在HTML中，我们定义了一个<div>元素作为樱花瓣，使用CSS样式来设置其位置、颜色、形状和动画。在JavaScript中，我们使用setInterval()函数来每隔一段时间创建一个新的樱花瓣，并使用setTimeout()函数来在一定时间后移除它。最终，我们得到了一个简单的樱花飘落效果。
以下是一个更加完整的HTML樱花飘落代码，包括了更多的CSS样式和JavaScript代码，可以实现更加逼真的樱花飘落效果：
<!DOCTYPE html>
<html>
<head>
<title>樱花飘落</title>
<style>
body {
background-color: #f5f5f5;
overflow: hidden;
}
.petal {
position: absolute;
background-color: #fff;
border-radius: 50%;
opacity: 0.8;
animation: fall 10s linear infinite;
transform-origin: center bottom;
will-change: transform;
}
@keyframes fall {
0% {
transform: translate(0, -10%) rotate(0deg);
}
50% {
transform: translate(0, 110%) rotate(180deg);
}
100% {
transform: translate(0, 210%) rotate(360deg);
}
}
.tree {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 400px;
background-color: #8b4513;
border-radius: 50% 50% 0 0;
overflow: hidden;
}
.branch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 100px;
background-color: #8b4513;
border-radius: 50% 50% 0 0;
transform-origin: bottom center;
animation: sway 2s ease-in-out infinite;
}
@keyframes sway {
0% {
transform: translateX(-50%) rotate(0deg);
}
50% {
transform: translateX(-50%) rotate(10deg);
}
100% {
transform: translateX(-50%) rotate(-10deg);
}
}
@keyframes grow {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.flower {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background-color: #f00;
border-radius: 50%;
animation: grow 1s ease-in-out forwards;
}
</style>
</head>
<body>
<div class="tree">
<div class="branch"></div>
<div class="branch" style="transform: rotate(45deg);"></div>
<div class="branch" style="transform: rotate(-45deg);"></div>
<div class="flower" style="top: 80px;"></div>
<div class="flower" style="top: 120px;"></div>
<div class="flower" style="top: 160px;"></div>
</div>
<script>
// 创建樱花瓣
function createPetal() {
const petal = document.createElement('div');
petal.className = 'petal';
petal.style.left = Math.random() * window.innerWidth + 'px';
document.body.appendChild(petal);
// 移除瓣片
setTimeout(() => {
petal.remove();
}, 10000);
}
// 每隔一段时间创建樱花瓣
setInterval(() => {
createPetal();
}, 100);
</script>
</body>
</html>
这个代码实现了一个带有树和花的樱花飘落效果。在HTML中，我们定义了一个<div>元素作为树，使用CSS样式来设置其位置、颜色、形状和动画。在树的内部，我们定义了三个<div>元素作为树枝，使用CSS样式来设置其位置、颜色、形状和动画。在树枝的顶部，我们定义了三个<div>元素作为花，使用CSS样式来设置其位置、颜色、形状和动画。在JavaScript中，我们使用setInterval()函数来每隔一段时间创建一个新的樱花瓣，并使用setTimeout()函数来在一定时间后移除它。最终，我们得到了一个逼真的樱花飘落效果。
