CSS中的移動動畫是讓網頁元素在屏幕上移動的一種特效。這種動畫效果可以使網頁更加生動有趣,也可以提高網頁訪問者對網站的留存率和轉化率。
.box{ position:absolute; top:50px; left:50px; width:100px; height:100px; background-color:red; animation-name:move; animation-duration:2s; animation-delay:1s; animation-direction:reverse; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-play-state:paused; } @keyframes move{ 0%{left:50px;} 50%{left:300px;} 100%{left:50px;} }
代碼中的.box是網頁上的元素,通過position:absolute屬性在網頁上隨意移動。使用animation-name屬性播放預定義的動畫move,并通過animation-duration屬性指定動畫時間。animation-delay為動畫延遲時間,animation-direction指定動畫方向,animation-timing-function為動畫速度曲線,animation-iteration-count為動畫播放次數,設置為infinite為無限次循環,animation-play-state指定動畫播放狀態,paused屬性表示動畫暫停。
@keyframes是CSS3中用于定義動畫關鍵幀的屬性,指定動畫開始、過渡、結束的關鍵幀。
使用CSS中的移動動畫,可以為網頁帶來更好的用戶體驗和視覺效果,也可以讓網站在競爭激烈的互聯網上脫穎而出。
上一篇nuxt創建vue3
下一篇html 設置絕對位置