CSS移動圖片動畫是一種常見的網頁設計技術,它可以讓網頁更加立體、生動。在CSS中,我們可以使用關鍵幀(@keyframes)動畫和CSS Transition(CSS過渡動畫)來實現圖片的移動效果。
img { position: relative; animation: move 2s infinite; } @keyframes move { 0% { left: 0; } 50% { left: 200px; } 100% { left: 0; } }
上面的代碼使用了關鍵幀(@keyframes)動畫實現了圖片的左右移動,其中關鍵幀(@keyframes)定義了圖片在移動過程中的變化狀態(left屬性的變化),并將動畫應用到了圖片上。這段代碼讓圖片沿左右往返移動,移動的時間是2秒,重復無限次。
除了使用關鍵幀(@keyframes)動畫,我們還可以使用CSS Transition(CSS過渡動畫)實現圖片的移動效果。
img { position: relative; transition: left 2s ease-in-out; } img:hover { left: 200px; }
這段代碼使用了CSS Transition(CSS過渡動畫)實現了圖片的左右移動,當鼠標懸停在圖片上時,圖片將向右移動200像素,移動的時間是2秒,并且使用了緩動函數(ease-in-out)讓移動更加自然。
總之,CSS移動圖片動畫是一種非常實用的網頁設計技術,可以讓網站更具活力,吸引用戶的眼球。