css制作轨迹

使用CSS动画制作轨迹

通过CSS的@keyframes和animation属性可以创建元素沿特定路径移动的效果。定义一个关键帧动画，设置元素在不同时间点的位置变化。

@keyframes move {
  0% { transform: translate(0, 0); }
  25% { transform: translate(100px, 50px); }
  50% { transform: translate(200px, 0); }
  75% { transform: translate(100px, -50px); }
  100% { transform: translate(0, 0); }
}

.element {
  animation: move 4s linear infinite;
}

使用SVG路径动画

结合SVG的<path>和CSS动画，让元素沿SVG路径运动。通过offset-path属性指定路径，再使用offset-distance控制移动。

.path {
  offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80');
  animation: move 3s linear infinite;
}

@keyframes move {
  100% { offset-distance: 100%; }
}

使用CSS过渡制作连续轨迹

通过transition属性实现平滑的位置变化。在JavaScript中动态修改元素的transform属性触发过渡效果。

.element {
  transition: transform 1s ease-out;
}

document.querySelector('.element').style.transform = 'translate(100px, 50px)';

结合伪元素创建轨迹线

利用::before或::after伪元素绘制运动轨迹的视觉线条。通过绝对定位和动画展现路径。

.track::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 100px;
  background: blue;
  animation: draw 2s forwards;
}

@keyframes draw {
  from { height: 0; }
  to { height: 100px; }
}

使用CSS变量控制动态路径

通过CSS变量和calc()函数实现动态路径计算，使轨迹能够响应式变化。

:root {
  --x-pos: 100px;
  --y-pos: 50px;
}

.element {
  transform: translate(var(--x-pos), var(--y-pos));
  transition: transform 0.5s;
}