CSS3是一種可以讓網(wǎng)頁(yè)變得更加豐富和多樣化的語(yǔ)言。其中的動(dòng)畫(huà)效果對(duì)于設(shè)計(jì)者來(lái)說(shuō)非常有用。本篇文章將講解如何使用CSS3來(lái)實(shí)現(xiàn)一個(gè)來(lái)回移動(dòng)的動(dòng)畫(huà)效果。

/* 創(chuàng)建一個(gè)div */
<div class="box"></div>
/* CSS代碼 */
.box{
width:100px;
height:100px;
background-color:#f00;
/* 設(shè)置動(dòng)畫(huà) */
-webkit-animation:move 2s linear infinite;
animation:move 2s linear infinite;
}
/* 定義動(dòng)畫(huà) */
@-webkit-keyframes move{
0%{left:0;}
50%{left:calc(100% - 100px);}
100%{left:0;}
}
@keyframes move{
0%{left:0;}
50%{left:calc(100% - 100px);}
100%{left:0;}
}

將上面的代碼復(fù)制到CSS文件中，打開(kāi)HTML文件，在頁(yè)面中創(chuàng)建一個(gè)class為“box”的div。這段代碼所實(shí)現(xiàn)的效果是，盒子會(huì)從最左邊移動(dòng)到最右邊，再?gòu)挠疫呉苿?dòng)回到左邊，不斷重復(fù)這個(gè)過(guò)程。

首先定義了一個(gè)class為"box"的元素，這個(gè)元素是一個(gè)正方形，通過(guò)CSS的background-color屬性設(shè)置了紅色背景。接著，在.box中設(shè)置了一個(gè)動(dòng)畫(huà)效果，名稱(chēng)為“move”，持續(xù)時(shí)間為2秒，使用線性的動(dòng)畫(huà)曲線重復(fù)播放。

在動(dòng)畫(huà)中，通過(guò)@keyframes在50%時(shí)將left值設(shè)為100%，這樣就可以讓元素移動(dòng)到最右邊。緊接著，再將left值設(shè)為0，元素就會(huì)回到最左邊。在動(dòng)畫(huà)的最后階段，再次將left值設(shè)為0，元素就會(huì)回到初始狀態(tài)，不斷循環(huán)移動(dòng)。

這就是如何使用CSS3實(shí)現(xiàn)來(lái)回移動(dòng)動(dòng)畫(huà)的方法。鼓勵(lì)讀者自己嘗試調(diào)整代碼，探索更多的CSS3動(dòng)畫(huà)效果。