CSS下雪花效果是一種經典的網頁裝飾效果。下面是一個簡單的CSS代碼實現這個效果。
/* 設置最外層容器的高度和背景顏色 */ .snow-container { height: 300px; background-color: #000; } /* 設置雪花的樣式 */ .snow-flake { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; } /* 設置雪花動畫效果 */ @keyframes snow-fall { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(200px); } } /* 使用JavaScript動態生成雪花 */ for (let i = 0; i< 50; i++) { const snowFlake = document.createElement("div"); snowFlake.classList.add("snow-flake"); snowFlake.style.left = Math.random() * 100 + "%"; snowFlake.style.animationDuration = (Math.random() * 3 + 2) + "s"; snowFlake.style.animationDelay = (-Math.random() * 5) + "s"; document.querySelector(".snow-container").appendChild(snowFlake); }
以上CSS和JavaScript代碼可以實現一片飄落的雪花效果。通過CSS設置雪花的樣式和動畫,JavaScript動態生成雪花并將其添加到容器中,讓網頁呈現出完美的下雪效果。
上一篇css中圓角邊框縮寫
下一篇css中如何實現漸變