CSS3動態(tài)軌跡是指在網(wǎng)頁中,使用CSS3技術可以在元素中添加動畫效果來產(chǎn)生運動效果。CSS3動態(tài)軌跡可以在HTML頁面上制作各種精彩的動畫效果,例如跑馬燈、旋轉、縮放、移動等,讓網(wǎng)頁變得生動活潑。
.container { position: relative; width: 400px; height: 400px; } .ball { position: absolute; top: 20px; left: 20px; width: 50px; height: 50px; background-color: blue; border-radius: 50%; animation-name: move; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes move { from { top: 20px; left: 20px; } to { top: 300px; left: 300px; } }
上述代碼中,容器(container)設置了相對定位,球(ball)設置了絕對定位,使用了CSS3的動畫屬性(animation),并定義了動畫的名稱、時間、次數(shù)和方式。同時,使用@keyframes關鍵字來定義動畫的起點(from)和終點(to)。
通過上述代碼,可以看到球(ball)在容器(container)中以直線軌跡運動,從左上角運動到右下角。通過調(diào)整動畫屬性,可以實現(xiàn)更加復雜的動畫效果。