css 雪花
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-color); color: var(--text-color); min-height: 100vh; overflow-x: hidden; transition: background-color 0.3s, color 0.3s; position: relative; } body::before { content: "❄️"; position: fixed; top: -30px; left: 5%; font-size: 14px; opacity: 0; z-index: -1; pointer-events: none; animation: snowfall 4s linear infinite; } body::after { content: "❄️"; position: fixed; top: -25px; left: 30%; font-size: 12px; opacity: 0; z-index: -1; pointer-events: none; animation: snowfall 5s linear infinite 1s; } body .snow-1 { content: "❄️"; position: fixed; top: -20px; left: 55%; font-size: 16px; opacity: 0; z-index: -1; pointer-events: none; animation: snowfall 6s linear infinite 2s; } body .snow-2 { content: "❄️"; position: fixed; top: -35px; left: 80%; font-size: 13px; opacity: 0; z-index: -1; pointer-events: none; animation: snowfall 4.5s linear infinite 0.5s; } body .snow-3 { content: "❄️"; position: fixed; top: -15px; left: 15%; font-size: 11px; opacity: 0; z-index: -1; pointer-events: none; animation: snowfall 5.5s linear infinite 1.5s; } body .snow-4 { content: "❄️"; position: fixed; top: -30px; left: 70%; font-size: 15px; opacity: 0; z-index: -1; pointer-events: none; animation: snowfall 4.8s linear infinite 2.5s; } @keyframes snowfall { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.8; } 25% { transform: translateY(25vh) translateX(10px); } 50% { transform: translateY(50vh) translateX(25px); } 75% { transform: translateY(75vh) translateX(40px); } 90% { opacity: 0.6; } 100% { transform: translateY(100vh) translateX(60px); opacity: 0; } }