CSS3的特性越來(lái)越豐富，其中的動(dòng)畫(huà)效果也越來(lái)越多樣化，今天給大家介紹一下CSS3中的泡泡動(dòng)畫(huà)樣式。

.bubble {
position: relative;
width: 10px;
height: 10px;
background-color: #f00;
border-radius: 50%;
animation: bubbleAnim 1s linear infinite;
}
@keyframes bubbleAnim {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-100px);
opacity: 0;
}
}

以上代碼實(shí)現(xiàn)了一個(gè)移動(dòng)的紅色圓形元素，為泡泡的形狀，其動(dòng)畫(huà)效果可分為如下幾個(gè)部分：

1.設(shè)置基礎(chǔ)樣式。首先需要設(shè)置元素的樣式，包括寬高以及圓角等。

.bubble {
position: relative;
width: 10px;
height: 10px;
background-color: #f00;
border-radius: 50%;
}

2.設(shè)置動(dòng)畫(huà)。使用CSS3的關(guān)鍵幀@keyframes實(shí)現(xiàn)元素的移動(dòng)動(dòng)畫(huà)。通常含有兩個(gè)關(guān)鍵幀，0%和100%。其中0%表示在起始狀態(tài)下元素的位置，100%則表示在結(jié)束狀態(tài)下元素的位置。使用transform屬性實(shí)現(xiàn)元素的位移效果，opacity屬性實(shí)現(xiàn)元素的出現(xiàn)和消失效果。

.bubble {
animation: bubbleAnim 1s linear infinite;
}
@keyframes bubbleAnim {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-100px);
opacity: 0;
}
}

3.應(yīng)用動(dòng)畫(huà)。將動(dòng)畫(huà)應(yīng)用于元素上，使用animation屬性實(shí)現(xiàn)。

.bubble {
animation: bubbleAnim 1s linear infinite;
}

4.完整代碼實(shí)現(xiàn)。將以上代碼整合起來(lái)，即可實(shí)現(xiàn)泡泡動(dòng)畫(huà)的樣式效果。

.bubble {
position: relative;
width: 10px;
height: 10px;
background-color: #f00;
border-radius: 50%;
animation: bubbleAnim 1s linear infinite;
}
@keyframes bubbleAnim {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-100px);
opacity: 0;
}
}

以上就是CSS3中泡泡動(dòng)畫(huà)樣式的介紹和實(shí)現(xiàn)過(guò)程，希望能對(duì)大家的開(kāi)發(fā)有所幫助。