CSS3是前端設計必學的一門技術,它擁有許多炫酷的特效和動畫效果,其中以放煙花的效果最為壯觀。
/* 創建爆炸動畫 */ @keyframes explode { from { transform: scale(0); opacity: 1; } to { transform: scale(10); opacity: 0; } } /* 給花瓣添加動畫 */ .bloom:after { content: ''; position: absolute; top: -25px; left: -25px; right: -25px; bottom: -25px; background: radial-gradient(circle, #ffeba3 20%, transparent 20%); background-size: 40px 40px; background-position: 0 0, 20px 20px; animation: explode 0.7s ease-out; } /* 將花朵定義為方塊,并讓其旋轉 */ .flower { width: 0; height: 0; border-top: 25px solid #ff0040; border-left: 25px solid transparent; border-right: 25px solid transparent; border-radius: 25px; transform: rotate(45deg); } /* 將花瓣鋪滿整個頁面 */ .bloom { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 最終實現煙花效果 */ .firework { position: absolute; top: 50%; left: 50%; animation: explode 0.7s ease-out; }
實現方法非常簡單,我們只需要按照上述代碼將煙花效果實現即可。建議對CSS3比較熟悉的開發人員可以動手自己實現,這樣也可以自由地拓展和調整效果。煙花效果的制作,除了需要對CSS3有一定的了解之外,還需要創意和耐心,而且要保證在不同瀏覽器中都能夠正常運行。
下一篇php api庫