CSS3是現代Web設計中的一種強大的工具。在CSS3中,我們可以實現各種華麗的效果,其中就包括煙花特效。
下面是一段純CSS3實現的煙花特效。你可以通過修改代碼中的各種屬性值來實現不同的效果:
.firework { position: absolute; width: 0; height: 0; border-radius: 50%; box-shadow: 0 0 20px #FFF; animation: explode 1s ease-out; } @keyframes explode { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 300px; height: 300px; opacity: 0; } } .firework:before { content:""; position: absolute; top: -10px; left:-10px; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 90px #FFF; transform-origin: 50% 90px; animation: explode2 1s ease-out; } @keyframes explode2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .firework:after { content:""; position: absolute; top: -10px; left:-10px; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 90px #FFF; transform-origin: 50% 90px; animation: explode3 1s ease-out; } @keyframes explode3 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
這段代碼通過三個不同的動畫實現了一個簡單的煙花效果。其中,animation
屬性用于指定動畫效果,@keyframes
定義了動畫的關鍵幀。
通過這段代碼,我們才證明CSS3的強大之處。利用CSS3,你可以輕松實現各種特效,讓你的網頁更加生動。