CSS如何让粒子留下消失的痕迹？

Question

我让粒子移动到了我想要的地方,但是我想添加一条会逐渐消失的小路径,我不知道如何去做

是否可以只用css？或者我是否必须参与jquery？

这是一个演示:LINK

#object{
    position: absolute;
    bottom:-2em;
    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;   
}


@-webkit-keyframes myOrbit {
    0%  { -webkit-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
    25%  { -webkit-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
    50%  { -webkit-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
    75%  { -webkit-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
    100%  { -webkit-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }

}

@-moz-keyframes myOrbit {
    0%  { -moz-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
    25%  { -moz-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
    50%  { -moz-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
    75%  { -moz-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
    100%  { -moz-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}

@-o-keyframes myOrbit {
        0%  { -o-transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
    25%  { -o-transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
    50%  { -o-transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
    75%  { -o-transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
    100%  { -o-transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }
}

@keyframes myOrbit {
    0%  { transform: rotate(0deg) translateX(5px) translateY(400px) rotate(0deg) scale(1); }
    25%  { transform: rotate(90deg) translateX(5px) translateY(400px) rotate(-90deg) scale(.60); }
    50%  { transform: rotate(180deg) translateX(5px) translateY(400px) rotate(-180deg) scale(.30); }
    75%  { transform: rotate(270deg) translateX(5px) translateY(400px) rotate(-270deg) scale(.60); }
    100%  { transform: rotate(360deg) translateX(5px) translateY(400px) rotate(-360deg) scale(1); }}

Answer 1

像这样的东西吗？

• 更改了关键帧动画，使其正确运行
• 添加了新的动画，使“轨迹”随着时间的推移逐渐淡出。

这是你的意思吗？

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