首页动态圣诞树代码html可复制

动态圣诞树代码html可复制

时间: 2024-12-26 12:12:23 浏览: 7

动态圣诞树的HTML代码通常会结合CSS和JavaScript来创建交互式的动画效果。以下是一个简单的例子，你可以复制到HTML文件中查看效果： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .tree { width: 200px; height: 250px; position: relative; } .star, .triangle { position: absolute; left: calc(50% - 25px); } .star { top: -45px; font-size: 72px; transform-origin: bottom center; } .triangle { top: 150px; width: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #fff; transition: transform 1s ease-out; } </style> </head> <body> <div class="tree" onclick="rotateTriangle()"> <span class="star">★</span> <div class="triangle"></div> </div> <script> function rotateTriangle() { var triangle = document.querySelector('.triangle'); var rotation = (triangle.style.transform || '').split(',')[1].trim(); if (rotation === 'rotateZ(180deg)') { triangle.style.transform = 'rotateZ(0deg)'; } else { triangle.style.transform = 'rotateZ(180deg)'; } } </script> </body> </html> ``` 这个代码创建了一个静态的星形和三角形组成的小圣诞树，当你点击树时，三角形会旋转180度。这只是一个基础示例，实际的动态圣诞树可能会有更复杂的动画和交互。

阅读全文