CSS3中可以使用軌跡運動實現元素的移動效果。軌跡運動是通過定義一條路徑,讓元素沿著路徑進行運動。實現軌跡運動的關鍵是使用path函數定義路徑,然后通過animation動畫來實現元素的移動效果。
.box { width: 100px; height: 100px; background-color: red; border-radius: 50%; position: absolute; /*定義動畫*/ animation: move 5s infinite; } /*定義路徑*/ @keyframes move { 0% { transform: translate(0, 0); } 50% { transform: translate(200px, 200px); } 100% { transform: translate(-200px, 0); } }
上面的代碼中,box元素使用了position: absolute屬性來使它從文檔流中脫離出來,不受其他元素的影響。然后通過animation動畫屬性來引用move動畫,使box元素沿著move動畫的路徑移動。move動畫定義了從開始位置到結束位置的路徑,以及在移動過程中的變化情況。
使用軌跡運動可以實現很多有趣的效果。比如,可以使用圓形路徑實現太陽系的模擬,也可以使用自定義路徑實現文字的動態效果。不過需要注意的是,軌跡運動只在支持CSS3的瀏覽器中才能實現。