在CSS中,我們可以使用動畫(animation)來實現(xiàn)一張圖片的循環(huán)移動,以下是一個簡單的示例:
我們需要定義一個動畫關(guān)鍵幀(@keyframes),它描述了圖片在動畫過程中的樣式變化,我們可以讓圖片從左側(cè)移動到右側(cè),然后再從右側(cè)移動到左側(cè),以此實現(xiàn)循環(huán)移動的效果。
@keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }
我們可以將這個動畫應(yīng)用到一個圖片元素上,并設(shè)置動畫的持續(xù)時間、延遲時間以及循環(huán)次數(shù)。
.image { position: absolute; width: 100px; height: 100px; animation: move 2s linear infinite; }
在這個示例中,圖片元素(.image)將會以2秒的持續(xù)時間進(jìn)行循環(huán)移動,并且永遠(yuǎn)不會停止(infinite),transform: translateX(100%)使得圖片在動畫結(jié)束時移動到右側(cè),然后在下一個循環(huán)開始時從右側(cè)移動到左側(cè)。
為了使圖片能夠循環(huán)移動,我們需要將position屬性設(shè)置為absolute,并指定width和height,這樣,圖片就可以在其父元素內(nèi)部自由移動了。