<\pre><\p>在網頁設計中，CSS為我們提供了豐富的樣式選擇和制作效果的方式。其中一個非常受歡迎的效果便是煙花效果。以下是如何使用CSS制作煙花效果的簡單介紹。<\pre><\p>CSS煙花效果通常使用偽元素:after和:before來制作。它和其他效果不同，它需要使用JavaScript來進行動畫效果的控制。代碼實現如下：<\pre>``` .firework { position: relative; width: 20px; height: 20px; } .firework:after { content: ""; position: absolute; border-radius: 50%; background-color: #FFF; top: -30px; left: -30px; right: -30px; bottom: -30px; opacity: 0; transition: all .5s ease-in-out; } .firework:before { content: ""; position: absolute; border-radius: 50%; background-color: #FFF; height: 6px; width: 6px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; opacity: 1; transition: all .1s ease-in-out; } .firework:hover:after { opacity: 1; transform: scale(1.25); } .firework:hover:before { height: 0; width: 0; opacity: 0; transition: all 0s ease-in-out .5s; animation: explode .5s ease-in-out forwards; } @keyframes explode { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } } ```<\pre><\p>代碼中的偽元素:after和:before分別代表了煙花的外側煙花爆炸效果和煙花內側的小點制造效果。鼠標懸浮到煙花上時，煙花外側的效果將會漸漸出現，內側的小點則會向四周散開，制造出煙花爆炸的真實感受。<\p>在以上代碼中，我們使用了CSS3的過渡和動畫效果完成了煙花效果。理解這些概念有助于我們在設計中有更好的創造力。<\p>總的來說，CSS煙花效果是一種非常好的方式來向網頁添加更多的細節和感覺。它可以讓網站的訪問者更愿意花費時間瀏覽我們的網頁，并產生更好的印象。