CSS3是一種用于網(wǎng)頁設(shè)計的樣式表語言，其具有豐富的功能，包括制作小動畫。現(xiàn)在我們將學(xué)習(xí)如何使用CSS3來制作小動畫。

/*為要制作動畫的元素添加CSS樣式*/
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: move 2s ease-in-out infinite;
}
/*定義動畫規(guī)則*/
@keyframes move {
0% {
top: 0;
left: 0;
}
50% {
top: 200px;
left: 200px;
}
100% {
top: 0;
left: 0;
}
}

在上面的代碼中，我們首先為要做動畫的元素設(shè)置了樣式，包括寬度，高度，背景顏色等等。接著，我們定義了一個名為“move”的動畫規(guī)則，其中包含了動畫的開始狀態(tài)（0%），中間狀態(tài)（50%），和結(jié)束狀態(tài)（100%）。我們通過調(diào)整元素的“top”和“l(fā)eft”屬性，使得元素在動畫過程中可以改變位置。

在最后一個代碼行中，我們將“move”動畫應(yīng)用于了目標(biāo)元素上，使得元素可以無限次地執(zhí)行動畫。

通過簡單的CSS3樣式設(shè)置和動畫規(guī)則定義，我們可以輕松地創(chuàng)建小動畫效果，使得頁面具有更加生動，有趣的特色。