在下面的加载动画中，我试图创建一个“彗星”，该彗星似乎从一边跳到另一边。除了彗星的“尾巴”需要从左向右反弹时，我几乎已经实现了它。
当它从右向左弹跳时，CSS渐变的角度应为90度。当它从左向右弹跳时，角度应为-90度。
这可能吗？
div.frame {
width: 480px;
margin: auto;
}
@keyframes loading-bar-animation {
from {margin-left: 0; width: 0}
50% {width: 100px}
to {margin-left: 100%; width: 0}
}
div.loading-bar {
width: 100px;
height: 2px;
background: linear-gradient(90deg, rgba(0,122,255,1), rgba(0,122,255,0));
animation-name: loading-bar-animation;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}<div class="frame">
<div class="loading-bar"></div>
</div> 您可以在动画中集成渐变更改。删除alternate关键帧中的，并添加更多状态，以创建替代效果，您可以在其中更改每个方向的渐变：
div.frame {
width: 480px;
margin: auto;
}
@keyframes loading-bar-animation {
from {
margin-left: 0;
width: 0;
background: linear-gradient(-90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
}
25% {
width: 100px;
background: linear-gradient(-90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
}
50% {
margin-left: 100%;
width: 0;
background: linear-gradient(-90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
}
50.1% {
margin-left: 100%;
width: 0;
background: linear-gradient(90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
}
75% {
width: 100px;
background: linear-gradient(90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
}
100% {
margin-left: 0%;
width: 0;
background: linear-gradient(90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
}
}
div.loading-bar {
width: 100px;
height: 2px;
background: linear-gradient(90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
animation-name: loading-bar-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}<div class="frame">
<div class="loading-bar"></div>
</div>另一个想法是使用多个动画：
div.frame {
width: 480px;
margin: auto;
}
@keyframes loading-bar-animation {
from {margin-left: 0; width: 0}
50% {width: 100px}
to {margin-left: 100%; width: 0}
}
@keyframes change {
0%,50% {background: linear-gradient(-90deg, rgba(0,122,255,1), rgba(0,122,255,0));}
50.1%,100%{background: linear-gradient(90deg, red, rgba(0,122,255,0));}
}
div.loading-bar {
width: 100px;
height: 2px;
background: linear-gradient(90deg, rgba(0,122,255,1), rgba(0,122,255,0));
animation-name: loading-bar-animation,change;
animation-duration: 1s,2s;
animation-iteration-count: infinite;
animation-direction: alternate,normal;
animation-timing-function: ease-in-out;
}<div class="frame">
<div class="loading-bar"></div>
</div>对于这种特殊情况，比例效果可以胜任：
div.frame {
width: 480px;
margin: auto;
}
@keyframes loading-bar-animation {
from {margin-left: 0; width: 0}
50% {width: 100px}
to {margin-left: 100%; width: 0}
}
@keyframes change {
0%,50% {transform:scaleX(-1)}
50.1%,100%{transform:scaleX(1)}
}
div.loading-bar {
width: 100px;
height: 2px;
background: linear-gradient(90deg, rgba(0,122,255,1), rgba(0,122,255,0));
animation-name: loading-bar-animation,change;
animation-duration: 1s,2s;
animation-iteration-count: infinite;
animation-direction: alternate,normal;
animation-timing-function: ease-in-out;
}<div class="frame">
<div class="loading-bar"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句