由于浏览器内核对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动画

GIF添加3D加速的更多相关文章

  1. cesium编程入门（六）添加 3D Tiles，并调整位置，贴地

    添加 3D Tiles,并调整位置 3D Tiles 是什么 3DTiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集,3DTiles数据集以分块.分级 ...

  2. VirtualBox VM启用3D加速

    默认情况下，是不支持 DX3D的， 我们运行 dxdiag 看到的情况如下： 安装时也提示需要安全模式下才能安装 VirtualBox 必须在Windows安全模式下才能成功安装3D加速驱动。 重启系 ...

  3. cesium编程入门(六)添加 3D Tiles，并调整位置，贴地

    添加 3D Tiles,并调整位置 3D Tiles 是什么 3DTiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集,3DTiles数据集以分块.分级 ...

  4. 在WPF中添加3D特性

    原文:在WPF中添加3D特性 35.4  在WPF中添加3D特性 本节介绍WPF中的3D特性,其中包含了开始使用该特性的信息. 提示: WPF中的3D特性在System.Windows.Media.M ...

  5. [Altium Designer 学习]怎样添加3D模型

    对于为给PCB添加3D模型,很多人觉得这是个绣花针的活,中看不中用.在我看来这也未必,特别是常用的3D模型能在网上下载的今天,只需要几个简单的操作,就能使你的PCB更加赏心悦目.除此之外,3D模型还有 ...

  6. CSS3 03. 3D变换、坐标系、透视perspective、transformZ、transform-style添加3D效果、backface-visibility元素背面可见、动画animation、@keyfarmes、多列布局

    1.左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指.食指和中指分别代表X.Y.Z轴的正方向.如下图 CSS中的3D坐标系 CSS ...

  7. Docker添加官方加速源（必须）

    在国内使用Docker必须用加速镜像不然的话无论是pull 官方的还是私有的镜像都会WAIT TIME EXCEED 下面给出macos的添加方式,非常简单 macOS 对于使用 macOS 的用户, ...

  8. transform 的旋转 ，3d效果，要添加3d效果的父级加上景深perspective。 3d效果的容器加上 transform-style：preserve-3d。

    该技术用于创建一个多维的数据,在这个实例中使用了两个元素用于正面和反面.前面用来放置产品图片,底部用来放置产品信息.默认情况下产品信息隐藏起来,同时鼠标悬停在产品图片上时,隐藏在底部的产品信息在X轴放 ...

  9. tableview cell添加3D动画

    当cell显示之前,会先调用该方法,因此给cell添加动画,在这个方法里面即可. -(void)tableView:(UITableView *)tableView willDisplayCell:( ...

随机推荐

  1. Canbus ID filter and mask

    Canbus ID filter and mask CANBUS is a two-wire, half-duplex, bus based LAN system that is ‘collision ...

  2. VB.NET中Module的概念

    今天学习VB.NET,发现VB.NET里面有一个Module的东西,如下图(图-1)所示: 图-1 上网查了一下VB.NET里面的Module,才发现这是学习VB.NET遇到的第一个典型的问题就是:为 ...

  3. X.509 数字证书结构和实例

    http://www.cppblog.com/sleepwom/archive/2010/07/08/119746.html 一. X.509数字证书的编码 X.509证书的结构是用ASN1(Abst ...

  4. Java异常(三) 《Java Puzzles》中关于异常的几个谜题

    概要 本章介绍<Java Puzzles>中关于异常的几个谜题.这一章都是以代码为例,相比上一章看起来更有意思.内容包括:谜题1: 优柔寡断谜题2: 极端不可思议谜题3: 不受欢迎的宾客谜 ...

  5. DELPHI新的变量的声明方法

    DELPHI新的变量的声明方法 从DELPHI 10.3.1开始支持新的变量声明方法: procedure TForm1.查询1Click(Sender: TObject); begin var ur ...

  6. C#编程（二十六）----------泛型

    泛型 有了泛型,就可以创建独立于被包含类型的类和方法了.我们不必给不同的类型编写功能相同的许多方法或类,只创建一个方法或类即可. 另一个减少代码的选项是使用object类,但object类不是类型安全 ...

  7. Linux 内核网络协议栈 ------sk_buff 结构体 以及 完全解释 （2.6.16）

    转自:http://blog.csdn.net/shanshanpt/article/details/21024465 在2.6.24之后这个结构体有了较大的变化,此处先说一说2.6.16版本的sk_ ...

  8. 完美解决Invalid layout of java.lang.String at value问题的方法

    :-(昨天一天没有写东西了,今晚略显有愧啊.昨天整理了下自己的电脑和桌面,把一些没有用和杂乱的东西都收拾收拾,于是一天就没了.今天赶快来补文章.本篇主要讲的是解决Invalid layout of j ...

  9. 开源项目MultiChoiceAdapter详解（三）——MulitChoiceNormalArrayAdapter的使用

    MulitChoiceNormalArrayAdapter是我自己定义的一个类,其实就是实现了MulitChoiceArrayAdapter,为什么做这个简单的实现类呢,因为这样我们在不用Action ...

  10. 用level-list让同一个ImageView根据条件来显示不同的内容

    感谢:http://blog.sina.com.cn/s/blog_6111ce890100psq9.html 有时候,我们为了在一个ImageView中显示不同的图片,平时往往会使用: if (条件 ...