CSS是一種強(qiáng)大的樣式表語言,可以控制網(wǎng)頁上的元素怎么顯示和排版。其中一種常見的應(yīng)用場景是讓物體循環(huán)左右運(yùn)動(dòng),如下面的代碼:
.box { position: relative; animation: loop 2s infinite; } @keyframes loop { 0% { left: 0px; } 50% { left: 200px; } 100% { left: 0px; } }
上述代碼中,我們定義了一個(gè)class名為box的元素,給它設(shè)置了相對定位。然后通過animation屬性來指定動(dòng)畫效果,指定了一個(gè)名為loop的動(dòng)畫,時(shí)長為2秒,并且讓它永遠(yuǎn)循環(huán)播放。
接下來是關(guān)鍵的動(dòng)畫定義,我們使用@keyframes關(guān)鍵字來定義一個(gè)名為loop的動(dòng)畫。在0%的時(shí)候,設(shè)置元素的左邊距為0px,在50%的時(shí)候設(shè)置為200px,在100%的時(shí)候再設(shè)置為0px,這樣就可以讓元素循環(huán)向左右移動(dòng)了。
可以根據(jù)需要調(diào)整動(dòng)畫的時(shí)長和運(yùn)動(dòng)效果,此外還可以配合其他CSS屬性來實(shí)現(xiàn)更加豐富的效果,比如改變元素的透明度、旋轉(zhuǎn)角度等等。這里只是簡單演示了一個(gè)物體循環(huán)左右運(yùn)動(dòng)的例子,希望對大家有所幫助。