當(dāng)我們?yōu)g覽網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)遇到一種互動(dòng)效果——當(dāng)我們點(diǎn)擊圖片或文字時(shí)，會(huì)彈出一個(gè)帶有動(dòng)畫(huà)效果的框框。這一效果其實(shí)是因?yàn)樵贑SS中通過(guò):hover偽類實(shí)現(xiàn)的，我們得益于CSS3的不斷完善，現(xiàn)在不僅可以實(shí)現(xiàn):hover，還可以利用:checked、:focus等更多的偽類效果。

那么讓我們來(lái)看一下怎樣通過(guò)CSS實(shí)現(xiàn)點(diǎn)擊圖片或文字彈出框框的效果吧！

/* 為圖片或文字添加一個(gè)類名，例如pop-up */
.pop-up {
position: relative; /* 相對(duì)定位，為偽元素定位提供參考 */
}
/* 當(dāng):hover時(shí)，顯示偽元素 */
.pop-up:hover::before {
content: ''; /* 必須要有內(nèi)容，否則偽元素不顯示*/
position: absolute;
left: 0; /* 偽元素左邊距離為0 */
bottom: -100%; /* 偽元素默認(rèn)在圖片下方，下邊距離為-100%表示不顯示 */
width: 100%; /* 偽元素寬度為100% */
height: 100%; /* 偽元素高度為100% */
background-color: rgba(0, 0, 0, 0.5); /* 偽元素為黑色半透明 */
transition: bottom 0.3s ease; /* 動(dòng)畫(huà)過(guò)渡時(shí)間為0.3秒，速度為緩慢 */
}
/* 當(dāng):hover時(shí)，偽元素bottom為0，向上動(dòng)畫(huà)彈出 */
.pop-up:hover::before {
bottom: 0;
}
/* 在偽元素中添加一個(gè)隨意的樣式 */
.pop-up:hover::before {
/* 在這里寫(xiě)字或添加圖片，樣式隨意 */
color: #fff;
font-size: 20px;
text-align: center;
padding: 10px;
}

以上就是實(shí)現(xiàn)點(diǎn)擊圖片或文字彈出框框的CSS代碼。總體思路就是為元素添加:hover并使用偽元素:before，通過(guò)bottom屬性控制元素的動(dòng)畫(huà)彈出和彈回，再通過(guò)在偽元素中添加樣式實(shí)現(xiàn)我們想要的特效。

希望這篇文章對(duì)大家有所幫助，讓你的網(wǎng)頁(yè)效果更加酷炫哦！