前端动图方案

悠悠：）2025-01-09 22:05

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

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

2、MP4文件

javascript 复制代码

//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是不能够用的

javascript 复制代码

<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博客

前端 动图方案

前端动图方案