如何让一个粒子留下一个逐渐消失的痕迹?

我正在做类似的事情，这就是我如何发现这个问题。我把我想到的东西改编成你的答案。我不确定它是否适合你正在做的事情，但它仍然很有趣。

var obj = document.getElementById("object");
class Particle {
    constructor(parent) {
    this.div = document.createElement("div");
    this.div.classList.add("particle");
    this.div.classList.add("twinkle");
    this.div.id = "particle-" + Date.now();
    parent.appendChild(this.div);
    setTimeout(() => { // remove particle
        if(this.driftIntervalId) clearInterval(this.driftIntervalId);
            this.div.remove();
    }, 400);
  }
  drift(speed = 1) {
    var rad = Math.PI * Math.random();
    this.driftIntervalId = setInterval(() => {
        var left = +this.div.style.left.replace("px",'');
      var top = +this.div.style.top.replace("px",'');
      left += Math.sin(rad) * speed;
      top += Math.cos(rad) * speed;
      this.div.style.left = left + "px";
      this.div.style.top = top + "px";
    }, 10);
  }
}
var particleFactory = function(meteor) {
    var rect = meteor.getBoundingClientRect();
  var particle = new Particle(meteor.parentElement);
  particle.div.style.left = rect.left + "px";
  particle.div.style.top = rect.top + "px";
  particle.drift(0.4);
  setTimeout(() => {
    particleFactory(meteor);
  }, 100);
};
particleFactory(obj);

像这样?

• 更改关键帧动画，使其正确运行
• 为'trail'添加了随着时间逐渐淡出的新动画。

你是这个意思吗?

#object{
position: absolute;
top: 200px;
left:0;
right:0;
margin:0 auto;
width: 10px;
height: 10px;
background: red;    
-webkit-animation: myOrbit 6s linear infinite; 
-moz-animation: myOrbit 6s linear infinite; 
-o-animation: myOrbit 6s linear infinite; 
animation: myOrbit 6s linear infinite;
}
#object:after{
content: "";
position: absolute;
top: 0;
left:0;
right:0;
margin: 0 auto;
width: 100px;
height: 10px;
opacity: .1;
background-color: red;
-webkit-animation: myOrbit-fadeout 6s linear infinite; 
-moz-animation: myOrbit-fadeout 6s linear infinite; 
-o-animation: myOrbit-fadeout 6s linear infinite; 
animation: myOrbit-fadeout 6s linear infinite;
}

@-webkit-keyframes myOrbit {
0%  { -webkit-transform: rotate(0deg) translateY(200px); }
25%  { -webkit-transform: rotate(90deg) translateY(200px); }
50%  { -webkit-transform: rotate(180deg) translateY(200px); }
75%  { -webkit-transform: rotate(270deg) translateY(200px); }
100%  { -webkit-transform: rotate(360deg) translateY(200px); }
}
@-moz-keyframes myOrbit {
0%  { -moz-transform: rotate(0deg) translateY(200px); }
25%  { -moz-transform: rotate(90deg) translateY(200px); }
50%  { -moz-transform: rotate(180deg) translateY(200px); }
75%  { -moz-transform: rotate(270deg) translateY(200px); }
100%  { -moz-transform: rotate(360deg) translateY(200px); }
}
@-o-keyframes myOrbit {
0%  { -o-transform: rotate(0deg) translateY(200px); }
25%  { -o-transform: rotate(90deg) translateY(200px); }
50%  { -o-transform: rotate(180deg) translateY(200px); }
75%  { -o-transform: rotate(270deg) translateY(200px); }
100%  { -o-transform: rotate(360deg) translateY(200px); }
}
@keyframes myOrbit {
0%  { transform: rotate(0deg) translateY(200px); }
25%  { transform: rotate(90deg) translateY(200px); }
50%  { transform: rotate(180deg) translateY(200px); }
75%  { transform: rotate(270deg) translateY(200px); }
100%  { transform: rotate(360deg) translateY(200px); }
}
@-webkit-keyframes myOrbit-fadeout {
0%  { opacity: 1.0; }
25%  { opacity: .75; }
50%  { opacity: .5; }
75%  { opacity: .25; }
100%  { opacity: 0; }
}
@-moz-keyframes myOrbit-fadeout {
0%  { opacity: 1.0; }
25%  { opacity: .75; }
50%  { opacity: .5; }
75%  { opacity: .25; }
100%  { opacity: 0; }
}
@-o-keyframes myOrbit-fadeout {
0%  { opacity: 1.0; }
25%  { opacity: .75; }
50%  { opacity: .5; }
75%  { opacity: .25; }
100%  { opacity: 0; }
}
@keyframes myOrbit-fadeout {
0%  { opacity: 1.0; }
25%  { opacity: .75; }
50%  { opacity: .5; }
75%  { opacity: .25; }
100%  { opacity: 0; }
}