首页html写一个下雪的圣诞树

html写一个下雪的圣诞树

时间: 2023-12-11 09:11:54 浏览: 74

<!DOCTYPE html> <html> <head> <title>下雪的圣诞树</title> <style type="text/css"> body { background-color: #1e1e1e; } .tree { position: relative; width: 200px; height: 300px; margin: 50px auto; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.5); } .tree:before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 150px solid #008000; transform: translateX(-50%); } .tree:after { content: ''; position: absolute; top: 100px; left: 50%; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 75px solid #008000; transform: translateX(-50%); } .snow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .snowflake { position: absolute; top: 0; left: 0; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; opacity: 0.5; animation: snowfall 5s linear infinite; } @keyframes snowfall { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } </style> </head> <body> <div class="tree"> <div class="snow"> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> </div> </div> </body> </html>

阅读全文