首页用html、css、JavaScript语言写一个圣诞树代码

用html、css、JavaScript语言写一个圣诞树代码

时间: 2024-11-22 19:48:28 浏览: 82

创建一个简单的HTML、CSS和JavaScript结合的动态圣诞树，你可以尝试以下步骤。这里我们用HTML结构来定义树的基本元素，CSS来美化样式，JavaScript则添加一些交互性。 **HTML (index.html)**: ```html <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="tree"> <div class="star"></div> <div class="triangle"></div> <div class="triangle"></div> </div> <button onclick="rotateTree()">旋转圣诞树</button> <script src="scripts.js"></script> </body> </html> ``` **CSS (styles.css)**: ```css #tree { width: 200px; height: 300px; position: relative; margin: auto; } .star, .triangle { position: absolute; top: 50%; left: 50%; transform-origin: bottom center; } .star { font-size: 50px; line-height: 0; } .triangle { border-left: 50px solid transparent; border-right: 50px solid transparent; } ``` **JavaScript (scripts.js)**: ```javascript function rotateTree() { var star = document.querySelector('.star'); star.classList.toggle('flip'); var triangles = document.querySelectorAll('.triangle'); for (var i = 0; i < triangles.length; i++) { if (triangles[i].classList.contains('flip')) { triangles[i].classList.remove('flip'); } else { triangles[i].classList.add('flip'); } } } ``` 在这个例子中，`.star`代表星星，`.triangle`代表三角形。点击按钮后，会触发`rotateTree()`函数，它会使星星和部分三角形翻转，模拟圣诞树的动态效果。

阅读全文