在網(wǎng)頁設(shè)計開發(fā)中，視覺效果顯得尤為重要，如何通過CSS實現(xiàn)特效是我們的一大挑戰(zhàn)。下面我們將介紹一種CSS彈出特效代碼實現(xiàn)方法。

.pop-up {
opacity: 0;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 75px);
width: 150px;
height: 100px;
text-align: center;
border-radius: 5px;
background-color: #ffffff;
box-shadow: rgba(0,0,0,0.3) 0px 2px 8px;
transition: opacity 0.3s ease-in-out;
z-index: 99;
}
.pop-up.active {
opacity: 1;
}
.trigger {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 75px);
width: 150px;
height: 50px;
line-height: 50px;
border-radius: 5px;
background-color: #17a2b8;
color: #ffffff;
text-align: center;
cursor: pointer;
z-index: 99;
}
.trigger:hover {
background-color: #138496;
}

通過上面的代碼可以看到，我們在CSS中定義了兩個class：一個是.pop-up，代表彈出框容器；另一個是.trigger，代表觸發(fā)彈出框的元素。我們通過設(shè)置.pop-up的初始o(jì)pacity為0，將其隱藏起來。當(dāng).trigger被點(diǎn)擊后添加active class，同時修改.pop-up的opacity值為1，即可實現(xiàn)彈出效果。

通過改動.pop-up的樣式，我們可以定制自己的彈出框，而通過改動.trigger的樣式，也可以實現(xiàn)不同的觸發(fā)彈出框的效果。可以說這種方法是一種通用的CSS彈出特效實現(xiàn)方法。