首页html小雪节气贺卡

html小雪节气贺卡

时间: 2023-11-21 13:58:52 浏览: 98

以下是一个简单的HTML小雪节气贺卡的示例，你可以根据自己的需要进行修改和美化： ```html <!DOCTYPE html> <html> <head> <title>小雪节气贺卡</title> <meta charset="UTF-8"> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; text-align: center; } h1 { color: #333; font-size: 36px; margin-top: 50px; } p { color: #666; font-size: 24px; margin-top: 30px; } .snowflake { position: absolute; display: block; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; animation: snowfall 5s linear infinite; box-shadow: 0 0 5px #fff; } .snowflake:nth-child(1) { top: -10px; left: 10%; animation-delay: 0s; } .snowflake:nth-child(2) { top: -20px; left: 20%; animation-delay: 1s; } .snowflake:nth-child(3) { top: -30px; left: 30%; animation-delay: 2s; } .snowflake:nth-child(4) { top: -40px; left: 40%; animation-delay: 3s; } .snowflake:nth-child(5) { top: -50px; left: 50%; animation-delay: 4s; } @keyframes snowfall { 0% { transform: translateY(-100px) rotate(0deg); } 100% { transform: translateY(1000px) rotate(360deg); } } </style> </head> <body> <h1>小雪节气快乐！</h1> <p>愿你在这个美好的季节里，心情如雪花般纯净，生活如雪花般美好。</p> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> <div class="snowflake"></div> </body> </html> ```

阅读全文