爆炸效果是一種酷炫的CSS效果，它可以讓你的網(wǎng)頁元素在用戶交互時展現(xiàn)出一種炸裂的效果，超級震撼！下面就來介紹一下如何給你的網(wǎng)頁添加這個效果。

//HTML代碼
<div class="explosion">
<p>Click me!</p>
</div>
//CSS代碼
.explosion {
position: relative;
}
.explosion p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
padding: 1em 2em;
background-color: #000;
color: #fff;
cursor: pointer;
}
.explosion p:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #fff;
box-sizing: border-box;
opacity: 0;
transform: scale(1.5);
transition: opacity 0.3s, transform 0.3s;
}
.explosion:hover p:before {
opacity: 1;
transform: scale(1);
}
.explosion p:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 1;
}
.explosion:hover p {
color: #000;
transform: translateY(-50%) scale(1.2);
}
.explosion:hover p:after {
width: 100px;
height: 100px;
transition: width 0.3s ease-out, height 0.3s ease-out;
animation: explode 0.3s ease-out forwards;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(4);
opacity: 0;
}
}

以上就是實現(xiàn)爆炸效果的完整代碼，你可以復(fù)制粘貼到你的HTML和CSS文件中。通過更改CSS代碼中的細節(jié)參數(shù)，你可以定制出一款適合自己網(wǎng)頁的爆炸效果。祝你玩得開心！