樱花飘落html代码
时间: 2023-12-23 08:27:30 浏览: 54
以下是一个简单的樱花飘落的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>樱花飘落</title>
<style>
body {
background-color: #f5f5f5;
overflow: hidden;
}
.sakura {
position: absolute;
top: -10px;
font-size: 20px;
color: pink;
animation: sakuraFall linear infinite;
}
@keyframes sakuraFall {
0% {
transform: translate(0, -10px);
}
100% {
transform: translate(0, 100vh);
}
}
</style>
</head>
<body>
<script>
function createSakura() {
var sakura = document.createElement("div");
sakura.className = "sakura";
sakura.innerHTML = "🌸";
sakura.style.left = Math.random() * window.innerWidth + "px";
sakura.style.animationDuration = Math.random() * 5 + 5 + "s";
document.body.appendChild(sakura);
}
setInterval(createSakura, 100);
</script>
</body>
</html>
```
这段代码使用了JavaScript和CSS来实现樱花飘落的效果。在JavaScript部分,我们创建了一个名为"sakura"的div元素,并将其添加到页面中。通过设置元素的位置、颜色和动画效果,我们实现了樱花飘落的效果。在CSS部分,我们定义了"sakura"类来控制樱花的外观和动画效果。通过使用关键帧动画(@keyframes),我们实现了樱花从顶部飘落到底部的效果。