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;
}
