如何将 CSS 动画导出为动画 PNG、gif 或 WEBP *具有透明度*? [英] How can I export CSS animation as animated PNG, gif, or WEBP *with transparency*?
问题描述
按下面的运行代码段"，查看我要保存的动画加载微调器.
我想用透明度替换所有绿色.
另外，我希望动画完美循环.
我尝试使用 OBS 录制屏幕截图视频，然后上传到 https://ezgif.com/video-to-gif 并使用用透明度替换颜色"功能，但它根本没有去除任何绿色.
此外，如果导出 canvas 动画 比捕捉 CSS 动画，我会接受一个告诉我如何做的答案.
body {显示:弹性；溢出:隐藏；高度:100vf；填充:0；边距:0；背景色:#090；}.容器 {背景颜色:#0c0；高度:500px；宽度:500px；}.sym {位置:相对；宽度:100px；高度:100px；边界半径:50%；背景:线性渐变(白色 50%，黑色 0)；动画:r 8s 线性无限；}.sym:before, .sym:after {--i: 0;位置:绝对；顶部:25%；右: calc((1 - var(--i))*50%);底部:25%；左: calc(var(--i)*50%);边框:实心 16.6666666667px hsl(0, 0%, calc(var(--i)*100%));变换原点:calc(var(--i)*100%) 50%;变换:比例(0.5)；背景:hsl(0, 0%, calc((1 - var(--i))*100%));边界半径:50%；动画:s 4s 缓入缓出 calc(var(--i)*-4s) 无限交替；内容: '';}.sym:后{--i: 1;}@关键帧 s {到 {变换:比例(1.5)；}}@关键帧 r {到 {变换:旋转(1转)；}}/* 来自 https://codepen.io/thebabydino/pen/aJPMre/*/<div class='sym'></div>我使用 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 中合适.
(我仍然更愿意接受更简洁、更方便的答案，因为这种方法既耗时又容易出错.)
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.
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.
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>
I used OBS to capture a video of my browser as mp4.
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
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.
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屋！
