CSS3中可以使用軌跡運(yùn)動實(shí)現(xiàn)元素的移動效果。軌跡運(yùn)動是通過定義一條路徑,讓元素沿著路徑進(jìn)行運(yùn)動。實(shí)現(xiàn)軌跡運(yùn)動的關(guān)鍵是使用path函數(shù)定義路徑,然后通過animation動畫來實(shí)現(xiàn)元素的移動效果。
.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動畫定義了從開始位置到結(jié)束位置的路徑,以及在移動過程中的變化情況。
使用軌跡運(yùn)動可以實(shí)現(xiàn)很多有趣的效果。比如,可以使用圓形路徑實(shí)現(xiàn)太陽系的模擬,也可以使用自定義路徑實(shí)現(xiàn)文字的動態(tài)效果。不過需要注意的是,軌跡運(yùn)動只在支持CSS3的瀏覽器中才能實(shí)現(xiàn)。