在寒冷的冬天,雪花是一種不可或缺的元素。如果您想在網站上制作一個漂亮的雪花效果,可以嘗試使用js和css3。
function createSnow() { const snow = document.createElement("div"); snow.classList.add("snow"); const size = Math.random() * 20 + 5; snow.style.width = `${size}px`; snow.style.height = `${size}px`; const left = Math.random() * window.innerWidth; snow.style.left = `${left}px`; document.body.appendChild(snow); setTimeout(() =>{ document.body.removeChild(snow); }, 5000); } setInterval(() =>{ createSnow(); }, 300);
上述代碼使用js創建一個雪花元素,并將它添加到頁面中。通過設置元素的大小和位置,可以實現隨機大小和位置的雪花效果。
.snow { position: absolute; background-color: #fff; border-radius: 50%; opacity: 0.8; pointer-events: none; box-shadow: 0px 0px 5px #fff; animation: falling infinite linear; } @keyframes falling { 0% { transform: translateY(-100px) rotate(0deg); } 100% { transform: translateY(1500px) rotate(360deg); } }
上述代碼使用css3為雪花元素添加樣式,如設置位置、顏色以及動畫效果。通過設置動畫效果,可以實現雪花從上往下落下的效果。
最后,將上述代碼放在html文件中,并引入相應的js和css3文件,即可實現一個漂亮的雪花效果。
上一篇jsp css圖片顯示
下一篇mysql 覆蓋別名