隨著html5和CSS3的不斷發(fā)展，氣泡上升效果已經(jīng)不再是一個(gè)難以實(shí)現(xiàn)的功能了。下面我們將帶您了解如何在CSS中實(shí)現(xiàn)氣泡上升效果。

.bubble {
position: absolute; /*將氣泡元素設(shè)為絕對(duì)定位*/
bottom: -30px; /*設(shè)定氣泡的bottom值為-30px*/
border-radius: 50%; /*設(shè)定氣泡為圓形*/
width: 60px;
height: 60px;
background-color: #FFF;
box-shadow: 0px 0px 5px rgba(0,0,0,0.5); /*為氣泡添加陰影*/
animation: bubble 1.5s ease-out infinite; /*使用CSS3的動(dòng)畫(huà)屬性讓氣泡產(chǎn)生上升效果*/
}
@keyframes bubble {
0% { /*在第0%的時(shí)間點(diǎn)，氣泡位于bottom: -30px的位置*/
bottom: -30px;
transform: scale(1); /*不變化*/
}
50% { /*在第50%的時(shí)間點(diǎn)，氣泡位于bottom: 200px的位置并且變?yōu)橥该鞯?/
bottom: 200px;
opacity: 0;
transform: scale(0.6); /*縮小*/
}
100% { /*在第100%的時(shí)間點(diǎn)，氣泡回到初始狀態(tài)*/
bottom: 500px;
opacity: 0;
transform: scale(0.4); /*縮小*/
}
}

在上述代碼中，我們使用了CSS3的animation屬性創(chuàng)建了一個(gè)名為bubble的動(dòng)畫(huà)。在動(dòng)畫(huà)中，氣泡會(huì)從bottom: -30px的位置開(kāi)始快速上升，到達(dá)bottom: 200px的位置后，透明度漸漸變?yōu)?并縮小0.6倍，最后在bottom: 500px的位置消失。通過(guò)調(diào)節(jié)animation屬性及@keyframes中不同時(shí)間點(diǎn)的CSS屬性，您可以自由地變換氣泡上升的速度、高度、縮放等樣式。