在CSS中,我們可以使用@keyframes
規(guī)則來創(chuàng)建動(dòng)畫,使圖片能夠按照設(shè)定的路徑移動(dòng),以下是一個(gè)簡(jiǎn)單的示例,展示了如何使用CSS讓圖片自己動(dòng)起來:
1、HTML結(jié)構(gòu):
<div class="image-container"> <img class="moving-image" src="path-to-your-image.jpg" /> </div>
2、CSS樣式:
.image-container { position: relative; width: 200px; height: 200px; } .moving-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
3、動(dòng)畫定義:
@keyframes moveRight { 0% { left: 0; } 100% { left: 200px; } }
4、應(yīng)用動(dòng)畫:
.moving-image { animation: moveRight 2s linear; }
在這個(gè)示例中,圖片會(huì)向右移動(dòng)2秒,你可以根據(jù)需要調(diào)整動(dòng)畫路徑和持續(xù)時(shí)間,希望這能幫助你實(shí)現(xiàn)圖片自動(dòng)移動(dòng)的效果!