CSS實(shí)現(xiàn)軌跡圖的方法主要是通過CSS的animation屬性進(jìn)行控制。

// 首先定義好軌跡的path
path {
d: path('M0 0 L100 0 L100 100 L0 100 L0 0'); // 這里只是一個(gè)簡(jiǎn)單的正方形軌跡
}
// 定義好裝載軌跡圖的容器和圖形樣式
.container {
position: relative;
}
// 定義軌跡上的圖形樣式，這里以小球?yàn)槔?
.circle {
width: 20px;
height: 20px;
position: absolute;
background-color: #f00;
border-radius: 50%;
animation-name: move;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
// 開始動(dòng)畫
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(100px, 0);
}
50% {
transform: translate(100px, 100px);
}
75% {
transform: translate(0, 100px);
}
100% {
transform: translate(0, 0);
}
}

通過上述代碼，我們就可以實(shí)現(xiàn)一個(gè)在軌跡上運(yùn)動(dòng)的小球軌跡圖了。