CSS3是一種通用的樣式語言,可以用來呈現(xiàn)HTML或XML(包括SVG)文檔的內(nèi)容。CSS3中有許多非常有趣的新特性,比如就可以用動(dòng)畫方式移動(dòng)圖片。下面我們來看一下具體實(shí)現(xiàn)方式。
img { position: relative; animation: move 3s infinite; } @keyframes move { 0% { left: 0; } 50% { left: 50%; } 100% { left: 0; } }
上面代碼中,我們首先將圖片的position設(shè)置為relative,以便后續(xù)能夠使用left和top屬性移動(dòng)圖片。接著我們使用了CSS3的動(dòng)畫屬性animation,并定義了動(dòng)畫名為move,時(shí)長(zhǎng)為3s,并設(shè)置了循環(huán)次數(shù)為無限次。
接下來我們需要定義動(dòng)畫的關(guān)鍵幀樣式,通過設(shè)置left屬性從0變化到50%再變回0來實(shí)現(xiàn)左右移動(dòng)的效果。
最后,我們只需要將這段代碼放到頁面中,就可以看到圖片在左右移動(dòng)的動(dòng)畫效果了。