首页3D圣诞树html网页代码

3D圣诞树html网页代码

时间: 2024-12-26 08:16:56 浏览: 8

### 创建3D圣诞树的HTML网页代码实例为了实现一个简单的3D圣诞树效果，可以利用CSS3中的`transform`属性来构建三维空间内的对象。下面是一个基本的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D Christmas Tree</title> <style> body { background-color: #0f2c4b; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .tree { position: relative; width: 0px; height: 0px; border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 150px solid green; transform-style: preserve-3d; animation: rotateTree 10s infinite linear; } @keyframes rotateTree { from { transform: rotateY(0deg); } to { transform: rotateY(360deg);} } /* Adding ornaments */ .ornament { position: absolute; width: 10px; height: 10px; background-color: red; border-radius: 50%; top: var(--top); left: var(--left); box-shadow: inset 0 0 0 2px gold; transform: translateZ(20px); } .star { position: absolute; bottom: 150px; left: calc(50% - 15px); width: 30px; height: 30px; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background-color: yellow; transform-origin: center bottom; animation: twinkle 2s infinite alternate; } @keyframes twinkle { from { opacity: 1; } to { opacity: 0.5;} } </style> </head> <body> <div class="tree">  <div class="star"></div>  <span style="--top:-20px; --left:20px;" class="ornament"></span> <span style="--top:-40px; --left:60px;" class="ornament"></span> <span style="--top:-60px; --left:100px;" class="ornament"></span> </div> </body> </html> ``` 此示例展示了如何通过纯HTML和CSS创建一个旋转并带有闪烁星星装饰的简单3D圣诞树模型[^1]。

阅读全文