css制作轨迹
使用CSS动画制作轨迹
通过CSS的@keyframes和animation属性可以创建元素沿轨迹移动的效果。定义一个关键帧动画，设置元素在不同时间点的位置。
.trajectory {
position: absolute;
animation: move 5s linear infinite;
}
@keyframes move {
0% { left: 0; top: 0; }
25% { left: 100px; top: 50px; }
50% { left: 200px; top: 0; }
75% { left: 100px; top: -50px; }
100% { left: 0; top: 0; }
}使用SVG路径轨迹
结合SVG的<path>和CSS动画，可以让元素沿着复杂路径运动。需要定义SVG路径并通过offset-path属性绑定。
<svg width="200" height="200" viewBox="0 0 200 200">
<path id="path" d="M10,100 Q50,10 100,100 T190,100" fill="none" stroke="transparent"/>
</svg>
<div class="follower"></div>.follower {
offset-path: path('M10,100 Q50,10 100,100 T190,100');
animation: follow 3s linear infinite;
}
@keyframes follow {
100% { offset-distance: 100%; }
}使用CSS渐变模拟轨迹
通过background的线性或径向渐变可以创建视觉上的轨迹效果，适合静态背景设计。
.trail-effect {
width: 300px;
height: 100px;
background: linear-gradient(
to right,
red 0%,
orange 20%,
yellow 40%,
green 60%,
blue 80%,
purple 100%
);
}使用伪元素创建拖尾轨迹
通过::before或::after伪元素配合动画，可以制作元素移动后的拖尾效果。
.element {
position: relative;
animation: slide 3s infinite;
}
.element::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: rgba(255,0,0,0.5);
border-radius: 50%;
animation: trail 0.5s infinite;
}
@keyframes slide {
50% { transform: translateX(200px); }
}
@keyframes trail {
to { opacity: 0; transform: translateY(50px); }
}使用CSS Houdini实现高级轨迹
通过CSS Paint API可以自定义绘制轨迹（需浏览器支持）。注册一个paint worklet来动态绘制路径。
CSS.paintWorklet.addModule('trail-worklet.js');.element {
--trail-points: 5;
background: paint(trail);
}在worklet文件中定义绘制逻辑：
registerPaint('trail', class {
paint(ctx, size, props) {
const points = parseInt(props.get('--trail-points'));
// 自定义绘制代码
}
});
