HTML5 实现：会动的圣诞树代码大揭秘！

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Christmas Tree</title> <style> body { background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; } .tree { position: relative; width: 0; height: 0; margin-top: 50px; } .tree:before { content: ""; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid green; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .tree:after { content: ""; width: 150px; height: 150px; border-radius: 50%; background-color: brown; position: absolute; top: 100px; left: 50%; transform: translateX(-50%); } #lights { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 1; } #lights img { width: 30px; height: 30px; margin: 0 10px; animation: flicker 1s infinite alternate; } @keyframes flicker { 0% { opacity: 1; } 100% { opacity: 0.5; } } </style> </head> <body> <div class="tree"></div> <div id="lights"> <img src="https://img.icons8.com/color/48/000000/christmas-lights.png"/> <img src="https://img.icons8.com/color/48/000000/christmas-lights.png"/> <img src="https://img.icons8.com/color/48/000000/christmas-lights.png"/> </div> </body> </html> ######[AI写代码神器 | 1026点数解答 | 2024-11-06 16:14:48]

服务商

更多选项

快捷项

自定义