# 彼岸花HTML展示代码 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>彼岸花 - 曼珠沙华</title> <style> body { font-family: 'SimSun', '宋体', serif; background-color: #f8f1e9; color: #5c3a21; margin: 0; padding: 20px; text-align: center; } .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff9f0; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); } h1 { color: #a8323c; font-size: 2.5em; margin-bottom: 10px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); } .flower { margin: 30px auto; width: 300px; height: 300px; position: relative; } .petal { position: absolute; width: 60px; height: 120px; background: linear-gradient(to bottom, #ff3366, #cc0033); border-radius: 60px 60px 0 0; transform-origin: bottom center; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); } .stem { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 8px; height: 200px; background: linear-gradient(to bottom, #4d3319, #2c1a0a); } .description { text-align: left; line-height: 1.6; margin-top: 30px; padding: 0 20px; } .quote { font-style: italic; color: #7a5c3c; margin: 20px 0; padding: 10px 20px; border-left: 3px solid #a8323c; background-color: #f5ebe0; } </style> </head> <body> <div class="container"> <h1>彼岸花 · 曼珠沙华</h1> <div class="flower"> <!-- 花茎 --> <div class="stem"></div> <!-- 花瓣 - 通过CSS旋转创建花朵效果 --> <div class="petal" style="transform: rotate(0deg) translateY(-80px);"></div> <div class="petal" style="transform: rotate(30deg) translateY(-80px);"></div> <div class="petal" style="transform: rotate(60deg) translateY(-80px);"></div> <div class="petal" style="transform: rotate(90deg) translateY(-80px);"></div> <div class="petal" style="transform: rotate(120deg) translateY(-80px);"></div> <div class="petal" style="transform: rotate(150deg) translateY(-80px);"></div> <div class="petal" style="transform: rotate(180deg) translateY(-80px);"></div> <div class="petal" style="transform: rotate(210deg) translateY(-80px);"></div> <div class="petal" style="transform: rotate(240deg) translateY(-80px);"></div> <div class="petal" style="transform: rotate(270deg) translateY(-80px);"></div> <div class="petal" style="transform: rotate(300deg) translateY(-80px);"></div> <div class="petal" style="transform: rotate(330deg) translateY(-80px);"></div> </div> <div class="description"> <p>彼岸花，学名石蒜(Lycoris radiata)，又称曼珠沙华、红花石蒜，是石蒜科石蒜属植物。</p> <div class="quote"> "花开不见叶，叶生不见花，花叶两不相见，生生相错。" </div> <p>彼岸花通常在秋分前后开花，花茎高30-60厘米，伞形花序顶生，有花4-7朵，花鲜红色，花瓣反卷如龙爪。</p> <p>在中国传统文化中，彼岸花常被视为死亡、离别和不祥的象征，传说它生长在黄泉路上，是接引之花。</p> <p>在日本，彼岸花则被视为秋天的象征，因其花期在秋分前后(日本称"彼岸时节")而得名。</p> </div> </div> </body> </html> ``` 注意事项： 1. 代码中使用了CSS渐变和变换来创建彼岸花的视觉效果，可以根据需要调整颜色和形状 2. 花瓣数量可以通过增减.petal元素来调整，每个花瓣旋转角度间隔30度 3. 响应式设计方面，容器宽度设置为max-width，在小屏幕上会自动适应 [2025-06-10 22:35:30 | AI写代码神器 | 1231点数解答]