APNG初体验设计MM提出一个背景动图的设计需求，希望提升网站的节日氛围图，抱着设计为大的想法，最终通过APNG实现。

概要：由一个背景动图的设计需求，最终通过APNG实现。

最近设计MM提出一个需求，希望可以对PC网站的节日氛围图（静态效果图见下方），左侧和右侧部分装饰动起来，抱着设计为大的想法，我就提出可以给我gif我做一下试试看效果。

春节氛围图-静态

然后设计MM就给了我下面一个gif文件，说背景融合有点问题。 gif素材1

在白色背景上看仿佛还好，背景变成渐变色后，简直不要太奇怪～～～

使用GIF作为背景

后续张老师提了一句，可以使用APNG可以避免背景光晕的效果～

于是设计MM导出序列帧后，通过APNG在线生成工具，生成对应的APNG文件，图片见下方所示。 APNG素材

添加渐变色背景后的效果如下所示，完美～～～

使用APNG作为背景

可以简单对比一下

	GIF	ANPG
原素材
叠加渐变背景

代码demo如下所示

<div class="gif"></div>
<div class="anpg"></div>
<style>
.gif {
      min-height: 288px;
      background: url("https://imgservices-1252317822.image.myqcloud.com/image/011720220130849/e6f2b522.gif") no-repeat right calc(50% - 520px - 150px) top/auto 160px, linear-gradient(to bottom, #F12B2A, rgba(0,0,255,0)) no-repeat center top/ 100% 288px;
}
.anpg {
    min-height: 288px;
    background: url('https://imgservices-1252317822.image.myqcloud.com/image/011820220132828/ac5e77f3.png') no-repeat left calc(50% - 520px - 150px) top/auto, url("https://imgservices-1252317822.image.myqcloud.com/image/011820220140749/aab3cead.png") no-repeat right calc(50% - 520px - 150px) top/auto, linear-gradient(to bottom, #F12B2A, rgba(0,0,255,0)) no-repeat center top/ 100% 288px;
}
</style>

可以点击链接查看GIF和APNG的效果 shineasyr.github.io/FELearning/…

兼容问题

下面的图片可以看到，现代浏览器对APNG文件的支持情况还不错。退一步说个别不支持的浏览器，展示一张静态图的效果，也是可以接受的～～～

最后很可惜，设计MM觉得模糊且卡顿（其实可以抽帧改善卡顿，设计MM的电脑是4K的，普通用户木有那么高），效果没有那么流畅，最后还是选择了静帧背景图，没关系事情总是有波折，至少我体验了APNG，也有一点小收获～～～

参考链接