CSS3是一種可以讓網(wǎng)頁變得更加豐富和多樣化的語言。其中的動畫效果對于設計者來說非常有用。本篇文章將講解如何使用CSS3來實現(xiàn)一個來回移動的動畫效果。

/* 創(chuàng)建一個div */
<div class="box"></div>
/* CSS代碼 */
.box{
width:100px;
height:100px;
background-color:#f00;
/* 設置動畫 */
-webkit-animation:move 2s linear infinite;
animation:move 2s linear infinite;
}
/* 定義動畫 */
@-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;}
}

將上面的代碼復制到CSS文件中，打開HTML文件，在頁面中創(chuàng)建一個class為“box”的div。這段代碼所實現(xiàn)的效果是，盒子會從最左邊移動到最右邊，再從右邊移動回到左邊，不斷重復這個過程。

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

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

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