首页帮我写一个复杂的爱心树html代码

帮我写一个复杂的爱心树html代码

时间: 2023-03-03 17:54:36 浏览: 111

好的，以下是一个复杂的爱心树的HTML代码： ``` <!DOCTYPE html> <html> <head> <title>爱心树</title> <style> body { background-color: #e0f2f1; } #heart-tree { width: 100%; height: 500px; position: relative; } #heart-tree:before, #heart-tree:after { content: ""; position: absolute; background: #c2185b; border-radius: 50%; } #heart-tree:before { width: 20px; height: 20px; top: -10px; left: 50%; transform: translateX(-50%); } #heart-tree:after { width: 15px; height: 15px; top: 0; left: 56%; transform: translateX(-50%); } #heart-tree .heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 5px; height: 5px; background-color: #c2185b; border-radius: 50%; box-shadow: 0px 0px 10px 2px #c2185b; } #heart-tree .heart:before, #heart-tree .heart:after { content: ""; position: absolute; width: 5px; height: 5px; background-color: #c2185b; border-radius: 50%; box-shadow: 0px 0px 10px 2px #c2185b; } #heart-tree .heart:before { top: -5px; left: 0; } #heart-tree .heart:after { top: 0; left: 5px; } #heart-tree .leaf { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: #33691e; transform: rotate(45deg); } #heart-tree .leaf:nth-child(1) { top: 90px; left: 65px; } #heart-tree .leaf:nth-child(2) { top: 120px; left: 90px; } #heart-tree .leaf:nth-child(3) { top: 150px; left: 65px; } #heart-tree .leaf:nth-child(4) { top: 180px; left: 90px; } #heart-tree .leaf:nth-child(5) { top: 210px; left: 65px; } #heart-tree .leaf:nth-child(6) { top: 240px; left: 90px; } #heart-tree .leaf:nth-child(7) { top: 270px; left: 65px; } #heart-tree .leaf:nth-child(8) { top: 300px; left: 90px; } #heart-tree .leaf:nth-child(9) { top: 330px; left: 65px; } #heart-tree .leaf:nth-child(10) { top: 360px; left: 90px; } </style

阅读全文