首页用html实现动态圣诞树

用html实现动态圣诞树

时间: 2023-07-12 13:25:24 浏览: 92

好的，以下是一个用HTML和CSS实现动态圣诞树的示例代码： ``` <!DOCTYPE html> <html> <head> <title>动态圣诞树</title> <style> body { background-color: #1C1C1C; } .tree { position: relative; width: 100px; height: 150px; margin: 0 auto; animation: shake 0.5s ease-in-out infinite alternate; } .tree:before { content: ""; position: absolute; top: 0; left: 50%; margin-left: -10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid green; } .tree:after { content: ""; position: absolute; top: 18px; left: 50%; margin-left: -20px; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 10px solid green; } .tree .ball { position: absolute; bottom: 10px; left: 50%; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%; background-color: red; animation: blink 1s ease-in-out infinite; } @keyframes shake { from { transform: rotateZ(-2deg); } to { transform: rotateZ(2deg); } } @keyframes blink { 50% { opacity: 0.5; } } </style> </head> <body> <div class="tree"> <div class="ball"></div> </div> </body> </html> ``` 这段代码会在页面中画出一个绿色的圣诞树和一个闪烁的红色圆球，并且圣诞树和圆球都会动起来。你可以根据需要调整动画效果、样式和尺寸。

阅读全文