如何把 CSS 的动态效果转换成 GIF 动图的
最近我在网上发现了一个充满创意的 CSS 动态特效网站：CSSFX。这个网站上汇集了一系列独特的视觉效果，如悬停特效、动画按钮、渐变背景和 3D 旋转等。更棒的是，你可以一键复制 CSS 源码，直接用于你的项目中。
我想在文章中展示这些炫酷的动态特效，但截取静态图片并不能很好地传达这些效果。于是，我开始寻找一种将这些动态效果转换为 GIF 动图的方法，经过一番研究，我发现了两种有效的方法：
- 浏览器插件组合方案：Awesome Screenshot + MP4 到 GIF 转换器
- 程序化方案：Puppeteer + ImageMagick
接下来，我会详细介绍这两种方法的实现步骤。
方案一：浏览器插件组合方案
这个方案主要依赖两个工具：浏览器插件 Awesome Screenshot 和 MP4 到 GIF 转换器。许多在线转换工具要么收费，要么会在图片上添加水印，这让人非常不爽。而这套方案则可以避免这些问题。
1. 安装 Awesome Screenshot 插件
以 Chrome 浏览器为例，打开 Chrome 应用商店，搜索并安装 Awesome Screenshot 插件。
2. 使用 Awesome Screenshot 插件录制视频
打开你想要录制的网页，并启动 Awesome Screenshot 插件。选择“区域录制”，可以录制指定区域的动态效果。录制完成后，下载视频文件，通常会保存为 webm 格式。
3. 使用 MP4 到 GIF 转换插件
安装并使用 MP4 到 GIF 转换插件，将录制的视频转换为 GIF 动图。最终生成的 GIF 动图效果如下，是不是很炫酷？
方案二：程序化方案
这个方案适合技术人员，利用 JavaScript 库 Puppeteer 和图片处理工具 ImageMagick，可以将 CSS 动态效果自动化转换为 GIF 动图。
1. 安装 Puppeteer 库
通过 npm 安装 Puppeteer：
npm install puppeteer
2. 安装 ImageMagick
在 MacOS 系统中使用 Homebrew 安装 ImageMagick：
brew install imagemagick
3. 使用 Puppeteer 抓取 CSS 动态效果
编写并运行以下 JS 代码，用 Puppeteer 抓取动态效果的每一帧，生成一系列静态图片：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(`
<html>
<head>
<style>
.balls {
width: 4em;
display: flex;
align-items: center;
justify-content: space-between;
}
.balls div {
width: 0.8em;
height: 0.8em;
border-radius: 50%;
background-color: #fc2f70;
}
.balls div:nth-of-type(1) {
animation: left-swing 0.5s ease-in alternate infinite;
}
.balls div:nth-of-type(3) {
animation: right-swing 0.5s ease-out alternate infinite;
}
@keyframes left-swing {
50%, 100% {
transform: translateX(95%);
}
}
@keyframes right-swing {
50% {
transform: translateX(-95%);
}
100% {
transform: translateX(100%);
}
}
</style>
</head>
<body>
<div class="balls">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
`);
const frames = 50;
for (let i = 0; i < frames; i++) {
await page.evaluate(index => {
document.querySelector('.balls').style.animationPlayState = 'paused';
document.querySelector('.balls').style.animationDelay = `-${index / frames}s`;
}, i);
await page.screenshot({ path: `frame-${i}.png` });
}
await browser.close();
})();
4. 使用 ImageMagick 合成 GIF 动图
将生成的静态图片合成为 GIF 动图：
magick -delay 10 -loop 0 frame-*.png animation.gif
最终，你将得到一张包含 CSS 动态效果的 GIF 动图。
总结
以上两种方法各有优势。插件组合方案简单易用，适合所有人；而程序化方案适合技术人员，能够进行更多的自动化处理。根据你的需求选择适合的方法吧！