CSS作為前端開(kāi)發(fā)的重要組成部分，擁有各種各樣的效果和動(dòng)畫(huà)，其中左右移動(dòng)效果是比較常見(jiàn)的。下面我們來(lái)看一下如何使用CSS實(shí)現(xiàn)左右移動(dòng)效果。

.move {
position: relative;
animation: move 2s linear infinite;
}
@keyframes move {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 0;
}
}

上述代碼中，我們定義了一個(gè)CSS類(lèi)名為“move”，并將其position屬性設(shè)置為relative，表示其相對(duì)于其父元素進(jìn)行定位。同時(shí)，我們?yōu)槠涠x了一個(gè)名為“move”的動(dòng)畫(huà)，時(shí)長(zhǎng)為2秒，動(dòng)畫(huà)函數(shù)為“l(fā)inear”，表示它的速度是恒定的。 “infinite”則意味著動(dòng)畫(huà)是無(wú)限循環(huán)的。

在@keyframes中，我們定義了動(dòng)畫(huà)的三個(gè)關(guān)鍵幀，“0%”表示動(dòng)畫(huà)開(kāi)始的狀態(tài)，這里我們將元素的left值設(shè)置為0；“50%”則表示動(dòng)畫(huà)進(jìn)行到了一半的狀態(tài)，此時(shí)將元素的left值設(shè)置為50%；而“100%”表示動(dòng)畫(huà)結(jié)束的狀態(tài)，這里又將元素的left值設(shè)置為0。

這樣，我們就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的左右移動(dòng)的效果。如果想實(shí)現(xiàn)從右向左的移動(dòng)，只需要將“50%”狀態(tài)的元素left值改為負(fù)數(shù)即可。

總的來(lái)說(shuō)，CSS的移動(dòng)動(dòng)畫(huà)是非常有趣和實(shí)用的，能夠增加頁(yè)面的生動(dòng)性。在設(shè)計(jì)頁(yè)面時(shí)若需要使用，在class中加上.move即可。