css根据画航迹 |简单css框架

.path{
position: relative;
height: 50px;
width: 200px;
border-radius: 25px;
border: 1px solid black;
overflow: hidden;
}
.dot{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
animation: movePath 10s infinite;
}
@keyframes movePath{
from {transform: translateX(0)}
to {transform: translateX(180px)}
}

在上面的示例代码中，.path类指定了路径的形状，可以根据网页需要随意修改。在.dot类中，元素使用了绝对定位，并且指定了动画效果movePath，该效果会在10秒内循环播放，同时元素会在路径上面滑动。