首页樱花树落樱花html代码

樱花树落樱花html代码

时间: 2024-03-24 10:34:37 浏览: 177

樱花树落樱花的效果可以通过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的动画效果让樱花从上方落下。

阅读全文