我制作了一个SVG,现在它有几个直线移动的块。
有时当块移动时它只会在它们上方添加一个笔划,尽管我禁用了笔划。 注意:如果您仔细观察,可以看到块上方的橙色笔划
here看起来像什么。
@keyframes move {
0% {
transform: translate3d(250px , 0px , 0px);
}
50% {
transform: translate3d(-200px , 0px , 0px);
}
100% {
transform: translate3d(250px , 0px , 0px);
}
}
#loading_bar .cls-2 {
stroke: none;
transition: transform 2s ease-in-out;
animation: move 4s infinite forwards;
}
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
<defs>
<style>
.cls-1{fill:#64b2c1;}
.cls-2{fill:orange;}
.cls-3{fill:transparent;stroke-miterlimit:10;}
.cls-4{fill:#191919;}
</style>
</defs>
<g id="background">
<rect class="cls-1" width="1920" height="1080"/>
<rect class="cls-2" x="871" y="769" width="90" height="84"/>
</g>
<g id="loading_bar">
<rect class="cls-4" x="545" y="769" width="792" height="84"/>
<rect class="cls-2" x="789" y="789" width="40" height="40"/>
<rect class="cls-2" x="988" y="789" width="40" height="40"/>
<rect class="cls-2" x="888" y="789" width="40" height="40"/></g></svg>