Rya*_*yan 5 css animation animated-gif css-animations
按下面的“运行代码片段”即可查看我要保存的动画加载微调器。
我想用透明度替换所有绿色。
另外，我希望动画能够完美循环。
我尝试使用 OBS 录制屏幕捕获视频，然后上传到https://ezgif.com/video-to-gif并使用“用透明度替换颜色”功能，但它根本没有删除任何绿色。
另外，如果导出canvas动画比捕获 CSS 动画更容易，我会接受向我展示如何操作的答案。
body {
display: flex;
overflow: hidden;
height: 100vf;
padding: 0;
margin: 0;
background-color: #090;
}
.container {
background-color: #0c0;
height: 500px;
width: 500px;
}
.sym {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(white 50%, black 0);
animation: r 8s linear infinite;
}
.sym:before, .sym:after {
--i: 0;
position: absolute;
top: 25%;
right: calc((1 - var(--i))*50%);
bottom: 25%;
left: calc(var(--i)*50%);
border: solid 16.6666666667px hsl(0, 0%, calc(var(--i)*100%));
transform-origin: calc(var(--i)*100%) 50%;
transform: scale(0.5);
background: hsl(0, 0%, calc((1 - var(--i))*100%));
border-radius: 50%;
animation: s 4s ease-in-out calc(var(--i)*-4s) infinite alternate;
content: '';
}
.sym:after {
--i: 1;
}
@keyframes s {
to {
transform: scale(1.5);
}
}
@keyframes r {
to {
transform: rotate(1turn);
}
}
/* from https://codepen.io/thebabydino/pen/aJPMre/ */<body>
<div class='container'>
<div class='sym'></div>
</div>
</body>我使用OBS将浏览器的视频捕获为 mp4。
然后我像这样使用ffmpeg将绿色色度键颜色替换为透明度并保存为动画gif文件：
ffmpeg -t 9 -i screenCapture.mp4 -filter_complex "[0:v]colorkey=0x2dd103:0.3:0.5,format=yuva420p,crop=500:500:6:427,split[v0][v1];[v0]palettegen[p];[v1][p]paletteuse,setpts=0.1*PTS" -r 100 final.gif
请注意，我认为-t 9和setpts=0.1*PTS和-r 100 应该以一种影响动画是否从头到尾精确捕获的方式组合，但我还没有掌握它。
因此，剩下的问题是确保 gif 无缝循环（我认为这可以通过RealWorld Paint删除多余的帧来实现）并确保动画速度在 PowerPoint 2013 中合适。
（我仍然更愿意接受一个更干净、更方便的答案，因为这种方法既耗时又容易出错。）