首页圣诞树html网页代码js

圣诞树html网页代码js

时间: 2024-09-19 09:14:50 浏览: 103

创建一个简单的圣诞节主题HTML页面，你可以包含一棵动态圣诞树，使用JavaScript添加一些交互效果。下面是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>圣诞树</title> <style> #tree { width: 300px; height: 400px; position: relative; } .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; /* 圣诞树的颜色 */ position: absolute; top: 0; } .star { background-color: yellow; width: 60px; height: 60px; border-radius: 50%; position: absolute; bottom: -30px; left: calc(50% - 30px); } </style> </head> <body> <div id="tree"> <div class="triangle"></div> <div class="star"></div> </div> <script> // JavaScript 动画 (这里只是一个基础示例) function rotateStar() { const star = document.querySelector('.star'); if (star.style.transform === 'rotate(180deg)') { star.style.transform = 'rotate(0deg)'; } else { star.style.transform = 'rotate(180deg)'; } } // 每隔一段时间旋转星星 setInterval(rotateStar, 2000); // 每2秒旋转一次 </script> </body> </html> ``` 在这个例子中，HTML部分定义了一个红色三角形作为圣诞树主体，黄色圆形作为星星，并通过CSS位置它们。JavaScript负责定时改变星星的角度（模拟旋转），营造动态效果。

阅读全文