樱花树落樱花html代码
时间: 2024-03-24 07:34:37 浏览: 154
html樱花飘落代码,html樱花飘落代码
樱花树落樱花的效果可以通过HTML和CSS来实现。以下是一个简单的示例代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>樱花树落樱花</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="tree">
<div class="sakura"></div>
</div>
</body>
</html>
```
CSS代码(style.css):
```css
.tree {
width: 200px;
height: 400px;
background-color: brown;
position: relative;
}
.sakura {
width: 20px;
height: 20px;
background-color: pink;
border-radius: 50%;
position: absolute;
animation: sakuraFall 5s infinite;
}
@keyframes sakuraFall {
0% {
top: -20px;
opacity: 1;
}
100% {
top: 400px;
opacity: 0;
}
}
```
这段代码创建了一个樱花树的效果,树干使用一个带有棕色背景的`div`元素表示,樱花使用一个带有粉色背景的`div`元素表示,并通过CSS的动画效果让樱花从上方落下。
阅读全文