您的位置:时时app平台注册网站 > web前端 > CSS本领:逐帧动画抖动施工方案【彩世界网址】

CSS本领:逐帧动画抖动施工方案【彩世界网址】

2019-09-19 06:56

CSS3技术-雪碧图自适应缩放

2015/08/20 · CSS · 雪碧图

原文出处: Aaron的博客   

花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放

ps: 以下实现都是基于移动端的处理

原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值

彩世界网址 1

问题很明显,在缩放的屏幕上人物还是按照原尺寸大小显示

后来临时留了一节预备的方案:CSS3的scale处理直接可以让元素缩放

彩世界网址 2

通过一个缩放的算放控制scale从而让雪碧图的元素可以缩放,目测还是不错。

但是这会带一系列的计算问题,因为通过sacle缩放后的元素,在浏览器布局中还是按照原尺寸计算的,所以这样的方案我也是非常的不满意

雪碧图常规的方案一般会做几套不同大小的图去适应不同的设备尺寸

这里我特指移动端单图的处理,采用的技术很简单CSS3一些知识点

先看看原图与处理后的效果

彩世界网址 3

彩世界网址 4

来讲解下原理,说白了很简单

先观察下矩阵的排量如上是行3 竖3 所以矩阵就是3*3的排列,但是这里只有8张图,怎么处理之后会讲

一般想让背景图填充整个元素在css3中可以通过background-size:100% 100%处理

显然不能让整图去填充元素,整图填充一个元素就是这效果

彩世界网址 5

如何让单图填充一个元素呢? 这里我想到了一个办法,把整图整体缩放,额,就是整体缩放。。。

3*3的矩阵,我横竖按照矩形的数量比缩放100%

CSS

background-size: 300% 300%;

1
background-size: 300% 300%;

彩世界网址 6

到了这一步估计大家都猜出来了,很简单了,通过百分比去取图了

至于精灵动画实现的手段太多了,比如定时器的帧动画,CSS3的animation动画,canvas动画

说真的所有的方案我都实现过,包括在移动端上线测试等等

目前最为理想的就是通过CSS3关键帧处理动画,如果动画多写一堆的样式就是一个蛋疼的事

所以这里我建议可以采用脚本生成关键帧,通过内联style加载,哈哈~~~ 非常完美~

彩世界网址 7

刚刚提到了如果3*3的矩阵,但是总数不到9个要如何处理?

所以这里我提供一个关键帧的算法给大家参考下,比较简单

彩世界网址 8

这是我项目中的用了,为了便于大家理解,我做了一个简单的

大家如果有兴趣可以连接到github,顺手踩一踩Followers下,感谢~~

github连接 : 

1 赞 收藏 评论

彩世界网址 9

总结

感谢阅读完本文章的读者。本文是笔者的个人观点,希望能帮助到有相关问题的朋友,如果本文有不妥之处请不吝赐教。


冷静一下,再想想方案

不就是缩放么?background-size会扯出这么多问题,不是还有个transform么?会出现同样的问题么? 那么要得到正确的效果的话,以放大两倍为例,需要做到: 恩?好像就加一行代码?

CSS

.message:after { ... transform: scale(2); }

1
2
3
4
.message:after {
    ...
    transform: scale(2);
}

好吧,就是这样。两者区别也很简单,因为一个作用在元素上,一个作用在雪碧图上,所以后者会带出n多副作用。

那么如果需要缩放到固定尺寸时,还需要知晓原始尺寸,通过计算得到一个缩放系数,这样才能最终达到所需的效果。

解决构想二

把逐帧取位与图像缩放拆分成两个独立的过程,就是笔者的「解决构想二」:
彩世界网址 10

实现「构想二」,笔者首先想到的是使用 transform: scale(),于是整理了一个实现方案A:

.steps_anim { position: absolute; width: 360px; height: 540px; background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat; background-size: 1800px 540px; top: 50%; left: 50%; transform-origin: left top; margin: -5.625rem 0 0 -5.625rem; transform: scale(.5); animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -1800px; } } /* 写断点 */ @media screen and (width: 320px) { .steps_anim { transform: scale(0.4266666667); } } @media screen and (width: 360px) { .steps_anim { transform: scale(0.48); } } @media screen and (width: 414px) { .steps_anim { transform: scale(0.552); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.steps_anim {
  position: absolute;
  width: 360px;
  height: 540px;
  background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
  background-size: 1800px 540px;
  top: 50%;
  left: 50%;
  transform-origin: left top;
  margin: -5.625rem 0 0 -5.625rem;
  transform: scale(.5);
  animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -1800px;
  }
}
/* 写断点 */
@media screen and (width: 320px) {
.steps_anim {
transform: scale(0.4266666667);
}
}
@media screen and (width: 360px) {
.steps_anim {
transform: scale(0.48);
}
}
@media screen and (width: 414px) {
.steps_anim {
transform: scale(0.552);
}
}

这个实现方案A存在明显的缺陷:scale 的值需要写很多断点代码。于是笔者结全一段 js 代码来改善这个实现方案B:

css:

.steps_anim { position: absolute; width: 360px; height: 540px; background: url("//misc.aotu.io/leeenx/sprite/m.png") 0 0 no-repeat; background-size: 1800 540px; top: 50%; left: 50%; transform-origin: left top; margin: -5.625rem 0 0 -5.625rem; animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -1800px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.steps_anim {
  position: absolute;
  width: 360px;
  height: 540px;
  background: url("//misc.aotu.io/leeenx/sprite/m.png") 0 0 no-repeat;
  background-size: 1800 540px;
  top: 50%;
  left: 50%;
  transform-origin: left top;
  margin: -5.625rem 0 0 -5.625rem;
  animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -1800px;
  }
}

javascript:

// 以下代码放到<head></head>中// <![CDATA[ document.write(" .steps_anim {scale(.5); } "); function doResize() { scaleStyleSheet.innerHTML = ".steps_anim {-webkit-transform: scale(" (document.documentElement.clientWidth / 750) ")}"; } window.onresize = doResize; doResize(); // ]]>

1
2
3
4
5
6
7
8
9
10
11
12
13
// 以下代码放到<head></head>中// <![CDATA[
document.write("
 
.steps_anim {scale(.5); }
 
 
");
function doResize() {
  scaleStyleSheet.innerHTML = ".steps_anim {-webkit-transform: scale(" (document.documentElement.clientWidth / 750) ")}";
}
window.onresize = doResize;
doResize();
// ]]>

通过改善后的方案 CSS 的断点没了,感觉是不错了,不过笔者觉得这个方案不是个纯粹的构建方案。

我们知道<img> 是可以根据指定的尺寸自适应缩放尺寸的,如果逐帧动画也能与 <img> 自适应缩放,那就可以从纯构建角度实现「构想二」。

SVG刚好可以解决难题!!!SVG 的表现与 <img>``类似同时可以做动画。以下是笔者的实现方案C。

html:

JavaScript

<svg viewBox="0, 0, 360, 540" class="steps_anim"> <image xlink:href="//misc.aotu.io/leeenx/sprite/m.png" width="1800" height="540" /> </svg>

1
2
3
<svg viewBox="0, 0, 360, 540" class="steps_anim">
  <image xlink:href="//misc.aotu.io/leeenx/sprite/m.png" width="1800" height="540" />
</svg>

css:

JavaScript

.steps_anim { position: absolute; width: 9rem; height: 13.5rem; top: 50%; left: 50%; margin: -5.625rem 0 0 -5.625rem; image { animation: step 1.2s steps(5) infinite; } } @keyframes step { 100% { transform: translate3d(-1800px, 0, 0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.steps_anim {
  position: absolute;
  width: 9rem;
  height: 13.5rem;
  top: 50%;
  left: 50%;
  margin: -5.625rem 0 0 -5.625rem;
  image {
   animation: step 1.2s steps(5) infinite;
  }
}
@keyframes step {
  100% {
    transform: translate3d(-1800px, 0, 0);
  }
}

随之而来的解决方案

回想整个渲染执行的流程:

  1. background-size 作用于整个雪碧图,对其尺寸缩放。
  2. background-position 定位。

那么要得到正确的效果的话,以放大两倍为例,需要做到:

  1. 将伪元素的尺寸扩大2倍
CSS

.message:after { width: originWidth * 2; height: originHeight * 2;
}

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6ce3955d4080086130-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6ce3955d4080086130-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6ce3955d4080086130-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6ce3955d4080086130-4">
4
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6ce3955d4080086130-1" class="crayon-line">
.message:after {
</div>
<div id="crayon-5b8f6ce3955d4080086130-2" class="crayon-line crayon-striped-line">
    width: originWidth * 2;
</div>
<div id="crayon-5b8f6ce3955d4080086130-3" class="crayon-line">
    height: originHeight * 2;
</div>
<div id="crayon-5b8f6ce3955d4080086130-4" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 将整个雪碧图的尺寸扩大2倍
CSS

.message:after { background-size: originSpriteWidth * 2,
originspriteHeight * 2; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6ce3955d8478968227-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6ce3955d8478968227-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6ce3955d8478968227-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6ce3955d8478968227-1" class="crayon-line">
.message:after {
</div>
<div id="crayon-5b8f6ce3955d8478968227-2" class="crayon-line crayon-striped-line">
    background-size: originSpriteWidth * 2, originspriteHeight * 2;
</div>
<div id="crayon-5b8f6ce3955d8478968227-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 将坐标偏移量相应扩大2倍
CSS

.message:after { background-position: originBackgroundPositionX *
2, originBackgroundPositionY * 2; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6ce3955db510312506-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6ce3955db510312506-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6ce3955db510312506-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6ce3955db510312506-1" class="crayon-line">
.message:after {
</div>
<div id="crayon-5b8f6ce3955db510312506-2" class="crayon-line crayon-striped-line">
    background-position: originBackgroundPositionX * 2, originBackgroundPositionY * 2;
</div>
<div id="crayon-5b8f6ce3955db510312506-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

彩世界网址 11

图片

综上,如果想在雪碧图内实现缩放逻辑,必须通过

  • 雪碧图长宽
  • 该图标原始长宽
  • 该图标在雪碧图中的偏移量

总共6个变量去实现。用动态样式语言的话,或许可以得到这么一个通用函数:

CSS

/* 雪碧图icon img: 图片路径 spriteWidth: 合成的雪碧图的宽度 spriteHeight: 合成的雪碧图的长度 originWidth: 使用图片的原始宽度 originHeight: 使用图片的原始长度 width: 需要呈现的宽度 height: 需要呈现的长度 offsetX: 雪碧图中的x轴偏移位置 offsetY: 雪碧图中的y轴偏移位置 horizontal: 水平定位 hDuration: 水平定位偏移 vertical: 垂直定位 vDuration: 垂直定位偏移 relativePos: 相对定位 */ .pseudo-icon-sprite (@img, @spriteWidth, @spriteHeight, @originWidth, @originHeight, @width, @height, @offsetX, @offsetY, @horizontal:left, @hDuration:0, @vertical:center, @vDuration:0, @relativePos:relative) { ... }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*
雪碧图icon
img: 图片路径
spriteWidth: 合成的雪碧图的宽度
spriteHeight: 合成的雪碧图的长度
originWidth: 使用图片的原始宽度
originHeight: 使用图片的原始长度
width: 需要呈现的宽度
height: 需要呈现的长度
offsetX: 雪碧图中的x轴偏移位置
offsetY: 雪碧图中的y轴偏移位置
horizontal: 水平定位
hDuration: 水平定位偏移
vertical: 垂直定位
vDuration: 垂直定位偏移
relativePos: 相对定位
*/
.pseudo-icon-sprite (@img,
    @spriteWidth, @spriteHeight,
    @originWidth, @originHeight,
    @width, @height,
    @offsetX, @offsetY,
    @horizontal:left, @hDuration:0,
    @vertical:center, @vDuration:0,
    @relativePos:relative) {
    ...
}

以上,我们完成了把雪碧图中的图标缩放后呈现在页面上的这一目标。

怎么样,看到这个解决方案,有没有一种把代码删光,把大中小三个图标都塞进雪碧图的冲动?

解决方案

「盈亏互补」也可以说是「盈亏不一致」,如果尺寸在缩放后「盈亏一致」那么抖动现象可以解决。

一些问题

看上去貌似是一个完美的解决方案,然而真的是这样么?我们来看一个例子:

彩世界网址 12

一个界面

目前有这么一个简单的页面(无视它的设计合理性吧),拿到手后撸起袖子就写。切图切着切着貌似哪里不对。。。恩!三个铃铛不是同一个图片大小不同而已么?明显有优化的余地啊!只要切一个图来个调整下尺寸不就解决了么~~

恩恩恩。在普通的页面中,来个backgroud-size妥妥地解决。

CSS

.message { background: url(../img/message.png) no-repeat; } .large { background-size: 64px 64px; } .normal { background-size: 32px 32px; } .small { background-size: 16px 16px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.message {
    background: url(../img/message.png) no-repeat;
}
 
.large {
    background-size: 64px 64px;
}
 
.normal {
    background-size: 32px 32px;
}
 
.small {
    background-size: 16px 16px;
}

当我们按部就班地把属性设置到雪碧图上时,可以发现,呈现出的效果完全不是之前设想的那样。尺寸、定位完全不对。哪里出了问题了呢?原理很简单。background-size并不感知icon的存在,我们想只针对icon进行配置,而这个属性其实是作用于整个雪碧图上的。

一个抖动的例子

做一个8帧的逐帧动画,每帧的尺寸为:360×540。

JavaScript

.steps_anim { position: absolute; width: 9rem; height: 13.5rem; background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat; background-size: 45rem 13.5rem; top: 50%; left: 50%; margin: -5.625rem 0 0 -5.625rem; animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -45rem; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.steps_anim {
  position: absolute;
  width: 9rem;
  height: 13.5rem;
  background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
  background-size: 45rem 13.5rem;
  top: 50%;
  left: 50%;
  margin: -5.625rem 0 0 -5.625rem;
  animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -45rem;
  }
}

观察在主流(手机)分辨率下的播放情况:

iPhone 6
(375×667)
iPhone 6
(414×736)
iPhone 5
(320×568)
Android
(360×640)

四种分辨率下,可以看到除了 ip6 其它的三种分辨率都发生了抖动。ip6 不抖动的原因是适配方案是基本于 ip6 的分辨率订制的。)

最后的总结

回顾一下,一个简单的缩放需求,出现了三种解决方案:

  1. 最无脑的全部放进雪碧图中
  2. 最冗长的修改background-size
  3. 以及最简短的transform变形

一般情况下,还是无视第二种方案吧。那么在1和3两者中间,则各有取舍。现在回想整个寻求解决方案的过程,个人还是比较倾向方案1的,毕竟,几乎没有什么出错的可能。而且都是同一张雪碧图,并没有更多的请求数,只是多了点图片大小而已。

CSS技巧:逐帧动画抖动解决方案

2017/08/16 · CSS · 动画

原文出处: 凹凸实验室   

笔者所在的前端团队主要从事移动端的H5页面开发,而团队使用的适配方案是: viewport units rem。具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 。

笔者目前(2017.08.12)接触到的移动端适配方案中,「利用视口单位实现适配布局」是最好的方案。不过使用 rem 作为单位会遇到以下两个难点:

  • 微观尺寸(20px左右)定位不准
  • 逐帧动画容易有抖动

第一个难点的通常出现在 icon 绘制过程,可以使用图片或者 svg-icon 解决这个问题,笔者强烈建议使用 svg-icon,具体理由可以参见:「拥抱Web设计新趋势:SVG Sprites实践应用」。

第二个难点笔者举个例子来分析抖动的原因和寻找解决方案。

雪碧图在缩放场景下的特殊处理

2016/07/13 · CSS · 雪碧图

原文出处: 百度EFE   

回想n年前刚写前端的时候,在处理一个’鼠标hover切换背景图会闪’的问题时,将两张背景图合成一张图片,顺利解决问题。这应该是我第一次用到雪碧图的情况。

彩世界网址 13

雪碧图作为背景在切换时不会有因为需要等待下载而产生的闪现

如今,打开一个站点,呈现铺天盖地的图片资源的页面随处可见。而多数站点更会用一套包含几十个风格统一的图标的图标库,加之移动端的占比与日俱增,雪碧图这项技术被运用的就越来越普遍。

分析抖动

图像由终端(屏幕)显示,而终端则是一个个光点(物理像素)组成的矩阵,换句话说图片也一组光点矩阵。为了方便描述,笔者假设终端上的一个光点代表css中的1px。

以下是一张 9px * 3px 的sprite:

彩世界网址 14

每帧的尺寸为 3px * 3px,逐帧的取位过程如下:
彩世界网址 15

把 sprite 的 background-size 的宽度取一半,那么终端会怎么处理?
9 / 2 = 4.5
终端的光点都是以自然数的形式出现的,这里需要做取整处理。取整一般是三种方式:round/ceil/floor。假设是 round ,那么 background-size: 5px,sprite 会是以下三种的一个:

情况一 情况二 情况三

理论上,5 / 3 = 1.666...。但实际上光点取整后,三个帧的宽度都不可能等于 1.666...,而是有一个帧的宽度降级为 1px(亏),另外两个宽度升级为 2px(盈),笔者把这个现象称作「盈亏互补」。

再看一下盈亏互补后,逐帧的取位过程:

情况一 情况二 情况三

可以看到由于盈亏互补导致了三个帧的宽度不一致,亏的那一帧在动画中的表示就是抖动

笔者总结抖动的原因是:sprite在尺寸缩放后,帧与帧之间的盈亏互补现象导致动画抖动

附注:1px 由几个光点表示是由以终端的 dpr 决定

最简单,最实用的使用方法

得益于伪元素的功劳,在不破坏页面结构,不增加多余标签的情况下,通过::after创建一个你所需要图标大小的伪元素,并将所需要的图标通过background-position定位到指定的空间,对应的图标变顺利地呈现出来。

CSS

.message:after { background: url(../img/sprite.png) scroll 0px -86px no-repeat transparent; content: ''; text-indent: -9999px; overflow: hidden; position: absolute; top: 0; left: 50%; margin-left: -10px; width: 20px; height: 22px; }

1
2
3
4
5
6
7
8
9
10
11
12
.message:after {
    background: url(../img/sprite.png) scroll 0px -86px no-repeat transparent;
    content: '';
    text-indent: -9999px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    height: 22px;
}

彩世界网址 16

通过伪元素实现的图标

参考资料:



1 赞 4 收藏 评论

彩世界网址 17

相关参考资料

一种雪碧图自动化方案的设想

MDN:background-size

1 赞 2 收藏 评论

彩世界网址 18

方案C的改良

实现方案C很好地解决了方案A和方案B的缺陷,不过方案C也有它的问题:不利于自动化工具去处理图片

自动化工具一般是怎么处理图片的?
自动化工具一般是扫描 CSS 文件找出所有的 url(...) 语句,然后再处理这些语句指向的图片文件。

如果 可以改用 CSS 的 `background-image` 就可以解决这个问题,不过 `SVG` 不支持 CSS 的 `background-image`。但是,`SVG`有一个扩展标签:`foreignObject`,它允许向 插入 html 代码。在使用它前,先看一下它的兼容情况:

彩世界网址 19

iOS 与 Android 4.3 一片草绿兼容情况算是良好,笔者实机测试腾讯 X5 内核的浏览器兼容仍旧良好。以下是改良后的方案。

html:

JavaScript

<svg viewBox="0, 0, 360, 540" class="steps_anim"> <foreignObject class="html" width="360" height="540"> <div class="img"></div> </foreignObject> </svg>

1
2
3
4
5
<svg viewBox="0, 0, 360, 540" class="steps_anim">
  <foreignObject class="html" width="360" height="540">
    <div class="img"></div>
  </foreignObject>
</svg>

css:

JavaScript

.steps_anim { position: absolute; width: 9rem; height: 13.5rem; top: 50%; left: 50%; margin: -5.625rem 0 0 -5.625rem; } .html { width: 360px; height: 540px; } .img { width: 1800px; height: 540px; background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat; background-size: 1800px 540px; animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -1800px 0; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.steps_anim {
  position: absolute;
  width: 9rem;
  height: 13.5rem;
  top: 50%;
  left: 50%;
  margin: -5.625rem 0 0 -5.625rem;
}
.html {
width: 360px;
height: 540px;
}
.img {
width: 1800px;
height: 540px;
background: url(//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
background-size: 1800px 540px;
animation: step 1.2s steps(5) infinite;
}
@keyframes step {
  100% {
    background-position: -1800px 0;
  }
}

改良后的方案DEMO:

解决构想一

笔者根据「盈亏一致」设计了「解决构想一」:

彩世界网址 20

根据上图,其实很容易就联想到一个简单的方案:不用雪碧图(即一帧对应一张图片)
这个方案确实是可以解决抖问题,不过笔者并不推荐使用它,因为它有两个负面的东西:

  • KB变大与请求数增多
  • 多余的 animation 代码

这个方案很简单,这里就不赘述了。

本文由时时app平台注册网站发布于web前端,转载请注明出处:CSS本领:逐帧动画抖动施工方案【彩世界网址】

关键词: