前端 动图方案

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

相关推荐
行云&流水17 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐24 分钟前
零基础学HTML和CSS:网页设计入门
前端·css
老虎062732 分钟前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴1 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack1 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669131 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx1 小时前
前端-CSS-day1
前端·css
知否技术2 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
幼儿园技术家2 小时前
Uniapp简易使用canvas绘制分享海报
前端