前端 动图方案

1、vue3+lottie  解析使用Bodymovin导出为json格式的Adobe After Effects动画

vue3+lottie的使用神器：vue3-lottie (electron也适用)-CSDN博客

2、MP4文件

//template部分
<video class="header-bg" src="../../assets/images/screen/layout/header-bg.mp4"autoplay muted loop disablepictureinpicture></video>
//css部分
.header-bg {position: absolute;mix-blend-mode: screen;//如果该视频为浅色的话可以试试mix-blend-mode: darken;}

3、GIF

因为不支持半透明会出现锯齿，因此需要高色彩的动画的话，gif是不能够用的

<img src="path/to/your/image.gif" alt="描述性文字">

4、APNG

APNG（Animated Portable Network Graphics）是一个基于PNG（Portable Network Graphics）的位图动画格式，扩展方法类似主要用于网页的GIF 89a，仍对传统PNG保留向下兼容……APNG与Mozilla社区关系密切，格式标准文档就放在Mozilla网站。——源自百度百科

Vue中加载apng动图_vue-apng-CSDN博客