首页用html帮我写一个爱心树

用html帮我写一个爱心树

时间: 2023-07-20 14:14:44 浏览: 86

爱心树.html

好的，以下是一个简单的爱心树代码，您可以将其复制到您的HTML文件中： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爱心树</title> <style> .tree { width: 400px; height: 400px; background-color: #E6FFE6; position: relative; } .heart { position: absolute; width: 50px; height: 50px; background-color: #FFCCCC; border-radius: 50% 50% 0 0; transform: rotate(-45deg); top: 150px; left: 175px; box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.5); } .heart::before, .heart::after { content: ""; position: absolute; background-color: #FFCCCC; border-radius: 50%; } .heart::before { width: 50px; height: 50px; top: -25px; left: 0; } .heart::after { width: 50px; height: 50px; top: 0; left: 25px; } .tree-trunk { width: 20px; height: 100px; background-color: #663300; position: absolute; bottom: 0; left: 190px; } .tree-branch { width: 120px; height: 20px; background-color: #339933; position: absolute; bottom: 100px; left: 140px; transform: rotate(-20deg); } </style> </head> <body> <div class="tree"> <div class="heart"></div> <div class="tree-trunk"></div> <div class="tree-branch"></div> </div> </body> </html> ``` 您可以将代码保存为一个HTML文件并在浏览器中打开，就可以看到一个简单的爱心树了。如果您需要更多的帮助，请随时问我。

阅读全文