CSS3動畫可以實現平移效果,具有良好的兼容性和動態效果,可以使網站頁面的設計變得更加立體和生動。
下面是CSS3動畫實現平移的示例代碼:
/* 定義需要運動的目標元素 */ .box { width: 100px; height: 100px; background: #f00; position: relative; /* 讓其可以絕對定位 */ } /* 定義動畫屬性 */ @keyframes move { 0% {left: 0px;} /* 動畫開始時在原處 */ 50% {left: 200px;} /* 動畫到一半時水平方向移動200px */ 100% {left: 0px;} /* 動畫結束時回到原處 */ } /* 執行動畫 */ .box:hover { animation: move 2s infinite; /* 運動時間2秒,循環播放動畫 */ }
以上CSS樣式定義了需要實現平移效果的目標元素,使用@keyframes定義了動畫屬性move,其中0%表示開始狀態,50%表示中間狀態,100%表示結束狀態。鼠標懸停在該元素上時,通過同名的.animation屬性運用move動畫效果,從而實現平移效果循環播放。