GIF添加3D加速

简介: 由于浏览器内核对Gif格式的图片会产生卡的情况,所以我们需要告诉浏览器,开启一下加速,方法很简单,就是利用css3的特性,强制告诉浏览器,这是个元素,需要3D转换,请务必开启加速效果方法1给gif开启3D独立层渲染,就是给图片一个0度角3D旋转,使动画图片只渲染最小区域,就是给gif添加样式transform: translate3d(0,0,0),gif动画会引起全屏重新渲染,开启3d动画目的是让git动画独立渲染方法2如果gif没有高保真的图片你可以按桢导入ai,然后导成矢量,github上有一个叫svgo的东西好像可以优化svg动画差值。

由于浏览器内核对Gif格式的图片会产生卡的情况,所以我们需要告诉浏览器,开启一下加速,方法很简单,就是利用css3的特性,强制告诉浏览器,这是个元素,需要3D转换,请务必开启加速效果

方法1

给gif开启3D独立层渲染,就是给图片一个0度角3D旋转,使动画图片只渲染最小区域,就是给gif添加样式transform: translate3d(0,0,0),gif动画会引起全屏重新渲染,开启3d动画目的是让git动画独立渲染

方法2

如果gif没有高保真的图片你可以按桢导入ai,然后导成矢量,github上有一个叫svgo的东西好像可以优化svg动画差值。好久没用过了,矢量导出svg格式

方法3

别用gif.用css动画或者canvas动画

目录
相关文章
|
数据处理 对象存储
如何利用 OSS 转换 webp 文件为jpeg
如何利用 OSS 转换 webp 文件为jpeg,OSS 样式使用
2015 1
|
10月前
|
编解码 Rust 前端开发
纯前端也能实现在线GIF压缩
纯前端也能实现在线GIF压缩
|
10月前
|
人工智能 算法 Java
png,jpg,jpeg,gif,webp这些图片格式解释一下,分别什么时候用?
png,jpg,jpeg,gif,webp这些图片格式解释一下,分别什么时候用?
215 0
|
存储 XML 编解码
探索现代图片格式:从GIF到HEIF,优势与适用场景一览-2
使用场景: JPEG适用于各种需要高度压缩、广泛兼容性以及不需要透明背景的场景。它特别适用于摄影、照片、艺术品等复杂图像的存储和展示。
540 0
|
存储 编解码 算法
探索现代图片格式:从GIF到HEIF,优势与适用场景一览
引言 最近在掘金看到很多动图头像,但都失真了,好奇就研究了下前端各种图片格式
298 0
|
Web App开发 存储 SQL
你不知道的图片压缩格式 ".webp"
你不知道的图片压缩格式 ".webp"
你不知道的图片压缩格式 ".webp"
|
存储 前端开发 应用服务中间件
动态转换图片格式为webp
动态转换图片格式为webp
动态转换图片格式为webp
|
计算机视觉 异构计算