CSS作為前端開(kāi)發(fā)中不可或缺的技術(shù)之一，不僅可以幫助我們改變網(wǎng)頁(yè)的樣式，還可以實(shí)現(xiàn)一些很酷炫的特效。今天，我們就來(lái)介紹一下如何使用CSS來(lái)實(shí)現(xiàn)禮花特效。

.firework {
position: fixed;
z-index: 100;
pointer-events: none;
}
.firework:before {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #f00;
animation: firework 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.firework:after {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgba(255, 0, 0, 0.4);
animation: shockwave 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
@keyframes firework {
from {
transform: scale(0);
}
to {
transform: scale(30);
opacity: 0;
}
}
@keyframes shockwave {
from {
transform: scale(0);
opacity: 0.4;
}
to {
transform: scale(1);
opacity: 0;
}
}

代碼中，我們首先定義一個(gè)名為firework的類，用于將禮花特效添加到頁(yè)面上。接下來(lái)，利用偽元素:before和:after，分別定義了禮花和震波的樣式和過(guò)渡動(dòng)畫(huà)。最后，通過(guò)@keyframes關(guān)鍵字定義了兩個(gè)動(dòng)畫(huà)，分別為firework和shockwave。

要使用這個(gè)禮花特效，只需在HTML中添加一個(gè)帶有firework類的元素即可：

<div class="firework"></div>

這樣，一個(gè)炫酷的禮花特效就完成了！