需要帮助修复我的 CSS 动画以实现连续流
Need help to fix my CSS animation for continuous flow
.svgContainer{
width:200px;
height: 200px;
margin-bottom:-10px;
}
svg line {
stroke: #5f39dd;
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 2px 20px;
animation: animateline 2s linear both infinite;
}
@keyframes animateline {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -5rem;
}
}
<div class="svgContainer" >
<svg >
<line x1="0" y1="0" x2="200" y2="200" ></line>
</svg>
</div>
让动画中断页面之类的内容并在几秒钟后再次播放。
有什么办法可以让这个动画连续播放,顺便说一下,没有任何中断。
只需使用-22px
(20px + 2px
) 然后控制持续时间来调整速度
.svgContainer {
width: 200px;
height: 200px;
margin-bottom: -10px;
}
svg line {
stroke: #5f39dd;
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 2px 20px;
animation: animateline .5s linear infinite;
}
@keyframes animateline {
to {
stroke-dashoffset: -22px;
}
}
<div class="svgContainer">
<svg>
<line x1="0" y1="0" x2="200" y2="200" ></line>
</svg>
</div>
.svgContainer{
width:200px;
height: 200px;
margin-bottom:-10px;
}
svg line {
stroke: #5f39dd;
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 2px 20px;
animation: animateline 2s linear both infinite;
}
@keyframes animateline {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -5rem;
}
}
<div class="svgContainer" >
<svg >
<line x1="0" y1="0" x2="200" y2="200" ></line>
</svg>
</div>
让动画中断页面之类的内容并在几秒钟后再次播放。 有什么办法可以让这个动画连续播放,顺便说一下,没有任何中断。
只需使用-22px
(20px + 2px
) 然后控制持续时间来调整速度
.svgContainer {
width: 200px;
height: 200px;
margin-bottom: -10px;
}
svg line {
stroke: #5f39dd;
stroke-width: 3px;
stroke-linecap: round;
stroke-dasharray: 2px 20px;
animation: animateline .5s linear infinite;
}
@keyframes animateline {
to {
stroke-dashoffset: -22px;
}
}
<div class="svgContainer">
<svg>
<line x1="0" y1="0" x2="200" y2="200" ></line>
</svg>
</div>