如何以透明性*将CSS动画导出为动画PNG，gif或WEBP？ [英] How can I export CSS animation as animated PNG, gif, or WEBP *with transparency*?
问题描述
按下面的运行代码段 ，以查看要保存的动画加载微调框。
Press "Run code snippet" below to see the animated loading spinner that I want to save.
我想用透明色替换所有绿色。
I want to replace all green colors with transparency.
此外，我希望动画循环播放
Also, I'd like the animation to loop perfectly.
我尝试使用OBS录制屏幕捕获视频，然后将其上传到 https://ezgif.com/video-to-gif 并使用用透明色替换颜色功能，但它根本没有去除任何绿色。
I tried recording a screen capture video using OBS and then uploading to https://ezgif.com/video-to-gif and using the "Replace color with transparency" feature, but it didn't remove any green color at all.
此外，如果导出 canvas 动画比捕获CSS动画更容易，我接受一个向我展示如何做的答案。
Also, if exporting canvas animations is easier than capturing CSS animations, I'd accept an answer that shows me how.
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。
I used OBS to capture a video of my browser as mp4.
然后我使用ffmpeg 喜欢这样，将绿色色度键颜色替换为透明色，并另存为动画gif文件：
Then I used ffmpeg like this to replace the green chroma key color with transparency and save as an animated gif file:
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 应该的组合方式会影响动画是否从头到尾精确地捕获，但是我还没有掌握。
Note that I think -t 9 and setpts=0.1*PTS and -r 100 should combine in a way that affects whether an animation is captured precisely from start to end, but I haven't mastered it.
所以剩下的问题是确保gif无缝循环（我认为可以通过 RealWorld Paint 删除多余的帧）并确保动画速度在PowerPoint 2013中合适。
So the remaining problems are to make sure that the gif loops seamlessly (which I think will be possible by removing superfluous frames via RealWorld Paint) and to make sure that the animation speed is appropriate in PowerPoint 2013.
（我仍然希望接受更简洁，更方便的答案，因为这种方法很耗时-且容易出错。）
(I'd still prefer to accept a cleaner, more convenient answer, as this approach is time-consuming and error-prone.)
这篇关于如何以透明性*将CSS动画导出为动画PNG，gif或WEBP？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
