首页使用js写圣诞树的代码

使用js写圣诞树的代码

时间: 2023-12-15 09:55:55 浏览: 75

很棒的问题！下面是一个简单的使用 JavaScript 编写的圣诞树代码示例： ```html <!DOCTYPE html> <html> <head> <title>圣诞树</title> <style> body { background: #111; } .tree { position: relative; width: 100px; height: 150px; margin: 100px auto 0; } .tree:before { content: ""; position: absolute; top: 0; left: 50%; margin-left: -10px; border-width: 0 10px 20px 10px; border-style: solid; border-color: transparent transparent #0b0 transparent; z-index: 1; } .tree:after { content: ""; position: absolute; top: 10px; left: 50%; margin-left: -15px; border-width: 0 15px 25px 15px; border-style: solid; border-color: transparent transparent #14172d transparent; z-index: 2; } .tree div { position: absolute; bottom: 0; width: 15px; height: 25px; background: #e23535; border-radius: 50%; transform-origin: bottom center; animation: bounce 3s ease-in-out infinite; } .tree div:nth-child(1) { left: 10px; animation-delay: 0s; } .tree div:nth-child(2) { left: 30px; animation-delay: 0.1s; } .tree div:nth-child(3) { left: 50px; animation-delay: 0.2s; } .tree div:nth-child(4) { left: 70px; animation-delay: 0.3s; } .tree div:nth-child(5) { left: 90px; animation-delay: 0.4s; } @keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } </style> </head> <body> <div class="tree"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <script> console.log("为了圣诞节，我给你带来了一个圣诞树！"); </script> </body> </html> ``` 祝您圣诞快乐！

阅读全文