gpt4 book ai didi

html - svg动画错误的方式

转载 作者:行者123 更新时间:2023-11-28 17:30:29 25 4
gpt4 key购买 nike

我目前有这个:http://jsfiddle.net/3qzt3hz6/4/

.circle{
stroke:green;
stroke-width:10;
fill:none;
stroke-dasharray:220 360;

stroke-dashoffset:0;

animation:mymove 2s infinite;
}

@keyframes mymove {
0%{
fill:tomato;
}
100%{
fill:tomato;
stroke-dasharray:0 360;
stroke-dashoffset:10;
}
}

我想知道如何“反转”动画,
现在它删除了绿色部分,但我希望它创建绿色部分。
所以..它应该从无边框开始,然后创建绿色边框,而不是从边框开始再移除边框。

最佳答案

使用这个,

.circle{
stroke:green;
stroke-width:10;
fill:none;
stroke-dasharray:0 360;

stroke-dashoffset:0;

animation:mymove 2s infinite;
}

@keyframes mymove {
0%{
fill:tomato;
}
100%{
fill:tomato;
stroke-dasharray:360 0;
stroke-dashoffset:10;
}
}

关于html - svg动画错误的方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26212849/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com