最近，CSS3 和 HTML 動(dòng)畫在網(wǎng)頁設(shè)計(jì)中越來越流行。這些動(dòng)畫可以讓網(wǎng)頁變得更加生動(dòng)、有趣，幫助吸引用戶的注意力。現(xiàn)在讓我們來看看一些 CSS3 和 HTML 動(dòng)畫的源代碼。

// CSS3 氣泡動(dòng)畫
.bubble{
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #e3f2fd;
animation: bubble 1.5s ease-in-out infinite;
}
@keyframes bubble {
0% {
box-shadow: 0 0 0px 0 rgba(255, 255, 255, 0.4);
}
100% {
box-shadow: 0 0 50px 25px rgba(255, 255, 255, 0.0);
}
}
// HTML 飛翔鳥動(dòng)畫
.bird-fly {
position: relative;
animation: fly 3s linear infinite;
}
@keyframes fly {
0% {
transform: translateX(-150px);
}
100% {
transform: translateX(1500px);
}
}

以上是兩個(gè)例子，其中 CSS3 氣泡動(dòng)畫使用了關(guān)鍵幀動(dòng)畫，同時(shí)也調(diào)用了一個(gè)無限循環(huán)來持續(xù)改變氣泡的樣式。HTML 飛翔鳥動(dòng)畫使用了 translateX() 函數(shù)來改變圖片的位置，同時(shí)也調(diào)用了一個(gè)無限循環(huán)來讓鳥的動(dòng)畫持續(xù)循環(huán)。