在rem布局下行使背景图片以及sprite,7-Up图自适应缩放

CSS3技能-7-Up图自适应缩放

2015/08/20 · CSS ·
雪碧图

原稿出处:
Aaron的博客   

花了一个礼拜完结了慕课网定制的重阳宗旨效果,其中有一个没兑现好的效果,就是百事可乐图的自适应缩放

ps: 以下已毕都是依照移动端的处理

原图如下: 人物是利用的是Coca Cola图,通过坐标相对数量取值

美高梅开户网址 1

标题很明确,在缩放的显示器上人物依然坚守原尺寸大小突显

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

美高梅开户网址 2

因而一个缩放的算放控制scale从而让百事可乐图的成分得以缩放,目测依旧不错。

唯独这会带一层层的测算难题,因为通过sacle缩放后的成分,在浏览器布局中恐怕按照原尺寸统计的,所以那样的方案我也是非凡的不令人满意

Sprite图常规的方案一般会做几套不一样大小的图去适应差其余装置尺寸

此间本人特指移动端单图的处理,采纳的技能很粗略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

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

2017/08/16 · CSS ·
动画

初稿出处:
坑坑洼洼实验室   

作者所在的前端团队主要从事活动端的H5页面开发,而集体使用的适配方案是:
viewport units + rem。具体可以参见凹凸实验室的篇章 –
行使视口单位落到实处适配布局

笔者方今(2017.08.12)接触到的运动端适配方案中,「利用视口单位贯彻适配布局」是最好的方案。可是使用
rem 作为单位会蒙受以下多个困难:

  • 微观尺寸(20px左右)定位不准
  • 在rem布局下行使背景图片以及sprite,7-Up图自适应缩放。逐帧动画简单有震动

首先个难点的一般性现身在 icon 绘制进度,可以拔取图片或者
svg-icon 化解这一个标题,小编强烈提出使用
svg-icon,具体理由可以瞻仰:「拥抱Web设计新势头:SVG
Pepsi-Colas实践应用」。

其次个难题小编举个例证来分析抖动的来头和搜索搞定方案。

Pepsi-Cola图在缩放场景下的尤其处理

2016/07/13 · CSS ·
雪碧图

初稿出处: 百度EFE   

想起n年前刚写前端的时候,在处理一个’鼠标hover切换背景图会闪’的难题时,将两张背景图合成一张图纸,顺遂解决难题。那应该是本人先是次用到Coca Cola图的景况。

美高梅开户网址 10

7-Up图作为背景在切换时不会有因为急需等待下载而爆发的闪现

当今,打开一个站点,突显多样的图样资源的页面遍地可知。而多数站点更会用一套包括几十个作风统一的图标的图标库,加之运动端的占比雨后春笋,7-Up图那项技术被使用的就更为普遍。

在rem布局下使用背景图片以及sprite

2016/08/29 · CSS · 2
评论 ·
rem,
sprite

初稿出处:
吕大豹   

后天活动端页面用rem布局已经是一大门户了,成熟的框架如天猫商城的flexiable.js,以及我的挚友@墨尘写的更轻量级的hotcss。用rem作单位使得成分可以自适应后,还有一块要求关爱的,这就是背景图片。本文就来聊聊那地方的东西。

一个震动的事例

做一个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 的分辨率订制的。)

最简便易行,最实用的选拔方法

得益于伪元素的功劳,在不损坏页面结构,不扩张多余标签的情事下,通过::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;
}

美高梅开户网址 11

通过伪成分完结的图标

rem布局

所谓rem布局就是指为文档的根节点<html>成分设置一个规格字体大小,然后所有的要素尺寸皆以rem为单位来写。比如将<html>的书体设为100px,若是急需做一个100*200的元素,css如是写:

CSS

div{ width: 1rem; height: 2rem; }

1
2
3
4
div{
    width: 1rem;
    height: 2rem;
}

那么最后获得的要素宽高就是100*200px了。

为了可以在不一致尺寸的无绳电话机显示屏上自适应,须要用js来判定手机宽度,并动态设置<html>的字体大小,那样基准字体变了,成分的尺寸自然相应变更,达到了自适应的功能。

那里只介绍基本概念,rem布局方案的其余细节不是本篇的范畴。最早提那几个方案的应该是winter寒老湿,有没有人更早选拔自家就倒霉考证了。

分析抖动

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

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

美高梅开户网址 12

每帧的尺码为 3px * 3px,逐帧的取位进程如下:
美高梅开户网址 13

把 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 决定

有些标题

看起来貌似是一个完美的化解方案,但是真正是这么么?咱们来看一个例证:

美高梅开户网址 14

一个界面

脚下有那般一个粗略的页面(无视它的布署性合理吧),获得手后撸起袖子就写。切图切着切着貌似哪儿不对。。。恩!多个铃铛不是同一个图片大小分裂而已么?显然有优化的余地啊!只要切一个图来个调整下尺寸不就缓解了么~~

恩恩恩。在一般的页面中,来个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举行布局,而以此性格其实是职能于一切Sprite图上的。

双倍设计稿

为了能在视网膜屏下清晰显示,现在的设计稿一般都是根据酷派5的涨幅(320)大概iphone6的升幅(375),进行双倍。也就是说,设计稿的拉长率相似是640大概750.

本条尺寸也不是相对的,因为One plus6
plus的dpr值为3,也有设计稿进行三倍尺寸,那样能在HUAWEI6
plus上完美展现。当然对于Android设备来说情状就更扑朔迷离了,dpr值什么样的都有,所以双倍设计稿算是一个折中方案,大体上能担保所有设施清晰突显图片。

那会儿,大家在页面上还要做一件工作,那就是动态设置<meta>中的viewport属性,将scale改成0.5(dpr为2)或许其他值,那样大家写css的时候,就足以依照原设计稿的尺码来写了。

咱俩切出来的图形是双倍大小,但是页面上的因素已经被动态缩短了,倘使要做背景图片的话,得想办法让图片跟着减弱才行。

焚薮而田方案

「盈亏互补」也得以说是「盈亏差距」,倘若尺寸在缩放后「盈亏一致」那么抖动现象可以解决。

随之而来的缓解方案

追思整个渲染执行的流水线:

  1. background-size 功效于一体Sprite图,对其尺寸缩放。
  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. 将全方位Pepsi-Cola图的尺寸扩展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>

美高梅开户网址 15

美高梅开户网址 ,图片

综上,倘使想在7-Up图内完毕缩放逻辑,必须透过

  • 七喜图长宽
  • 该图标原始长宽
  • 该图标在7-Up图中的偏移量

一共6个变量去达成。用动态样式语言的话,或然可以收获这么一个通用函数:

CSS

/* 百事可乐图icon img: 图片路径 spriteWidth: 合成的百事可乐图的增进率
spriteHeight: 合成的七喜图的长短 originWidth: 使用图片的原始宽度
originHeight: 使用图片的本来面目长度 width: 须要表现的宽窄 height:
必要表现的长短 offsetX: 7-Up图中的x轴偏移地方 offsetY:
Coca Cola图中的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) {
    …
}

以上,大家落成了把七喜图中的图标缩放后突显在页面上的这一目的。

怎么样,看到这么些化解方案,有没有一种把代码删光,把大中小多少个图标都塞进七喜图的欢跃?

cover与contain

CSS3为background-size属性增添了多个值:cover与contain。这几个三个值允许大家指定背景图片的自适应格局。它俩有何分别吧?

从言语上讲述,cover是拉伸图片使之充满成分,元素肯定是被铺满的,但是图片有只怕来得不全。contain则是拉伸图片使图片完全体现在要素内,图片肯定能显得全,不过成分大概不会被铺满。

地方说的“或者”的意况,暴发在要素尺寸和图片尺寸宽高比例差其余时候。

上面通过例子来演示一下那两者的用法。比如大家以HTC5为例,此时dpr为2,页面scale为0.5,基准字体大小为100px。设计稿上有一张90*200px的图样。那么css应该如此写:

CSS

#mm{ width: 0.9rem; height: 2rem; background-image: url(mm.jpg);
background-size: contain; background-repeat: no-repeat; }

1
2
3
4
5
6
7
#mm{
    width: 0.9rem;
    height: 2rem;
    background-image: url(mm.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

 

意义如下:

美高梅开户网址 16

当成分与背景图片的深浅一样,可能是宽高比例相同时,contain和cover的填充效果是相同的,因为双方在拉伸后总能使图片“恰好”完全充满元素。

不过有时成分的宽高比例是不确定的,比如有一张宽度为100%,中度为200px的图纸。此时contain和cover的区分就彰显出来了。如下图:

美高梅开户网址 17

可以看到contain的时候,成分右边有空落落没有填满。而cover的时候,成分尽管填满了,但是有一些图形已经拉伸到成相当部看不到了。那就是双方的不一致,实际行使的时候要依照具体情况来定。

化解构想一

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

美高梅开户网址 18

基于上图,其实很不难就联想到一个简约的方案:不用Sprite图(即一帧对应一张图纸)
那个方案确实是可以化解抖难点,可是小编并不引进使用它,因为它有五个负面的东西:

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

本条方案很简单,那里就不赘述了。

冷清一下,再思考方案

不就是缩放么?background-size会扯出这么多难点,不是还有个transform么?会冒出雷同的难题么?
那么要博取正确的职能的话,以加大两倍为例,必要形成:
恩?好像就加一行代码?

CSS

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

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

好吧,就是如此。两者分别也很简短,因为一个效果在要素上,一个成效在Pepsi-Cola图上,所将来者会带出n多副功能。

那么只要急需缩放到稳定尺寸时,还亟需领悟原始尺寸,通过计算得到一个缩放周到,这样才能最终完毕所需的职能。

background-size取具体值

我们精通background-size可以取具体的值以及百分比,那么大家一向把背景图片大小设置为跟成分大小相同不就完了呢?还费如何劲搞什么自适应。

自然是足以的。比如大家把上边的css改成那样:

CSS

#mm{ width: 0.9rem; height: 2rem; background-image: url(mm.jpg);
background-size: 0.9rem 2rem; background-repeat: no-repeat; }

1
2
3
4
5
6
7
#mm{
    width: 0.9rem;
    height: 2rem;
    background-image: url(mm.jpg);
    background-size: 0.9rem 2rem;
    background-repeat: no-repeat;
}

全盘可以达成均等的作用。

只是本人自个儿在写css的时候很不爱好写具体值,一般是能自适应就自适应。这样如果前期要改变成分的轻重,只要改一处就行,所以本人更欣赏用contain或cover。

缓解构想二

把逐帧取位与图像缩放拆分成多个独立的长河,就是小编的「解决构想二」:
美高梅开户网址 19

贯彻「构想二」,小编首先想到的是行使
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. 最无脑的整整放进7-Up图中
  2. 最冗长的修改background-size
  3. 以及最简便的transform变形

貌似景观下,仍然无视第三种方案吗。那么在1和3两者中间,则各有取舍。现在回看整个寻求解决方案的经过,个人照旧比较赞同方案1的,毕竟,大致从未什么出错的或是。而且都是均等张7-Up图,并没有越来越多的请求数,只是多了点图片大小而已。

sprite图片的拍卖

为了统一图片请求大家平常会用到sprite技术。在rem布局方案下,使用contain或cover来缩放背景图片就不能生效了。因为成分的背景其实是sprite图片的片段,contain和cover只好对整张图片举办缩放,不能控制到有些的轻重缓急。

比如说有如下一张200*50的sprite图。

美高梅开户网址 20

在选取contain缩放后是这般的

美高梅开户网址 21

之所以在拍卖sprite图片时,我们不得不给background-size取具体值。那么这么些值取多少吗?其实只要写咱俩切出来的图样的实在尺寸就行。

比如说我们的元素为50*50px,sprite图片为200*50px,这css应该如下:

CSS

#cpt{ width: 0.5rem; height: 0.5rem; background-image: url(cpt.png);
background-size: 2rem 0.5rem; }

1
2
3
4
5
6
#cpt{
    width: 0.5rem;
    height: 0.5rem;
    background-image: url(cpt.png);
    background-size: 2rem 0.5rem;
}

接下来修改background-position我们就足以取到sprite上的任何图片了。background-position也取具体值,也是按照切出来的图的尺码就行。

比如说自身那张图片是一个帧动画的4个帧,每一帧的背景图片应该如下:

CSS

#cpt.status1{ background-position: 0 0; } #cpt.status2{
background-position: -0.5rem 0; } #cpt.status3{ background-position:
-1rem 0; } #cpt.status4{ background-position: -1.5rem 0; }

1
2
3
4
5
6
7
8
9
10
11
12
#cpt.status1{
    background-position: 0 0;
}
#cpt.status2{
    background-position: -0.5rem 0;
}
#cpt.status3{
    background-position: -1rem 0;
}
#cpt.status4{
    background-position: -1.5rem 0;
}

行使那个尺寸,大家来做个小动画试试。

美高梅开户网址 22

本篇文章到此甘休,啰嗦了这么多,发现实际上可以用两句话就说完–!

1 赞 6 收藏 2
评论

美高梅开户网址 23

方案C的改良

落实方案C很好地化解了方案A和方案B的老毛病,但是方案C也有它的标题:不便宜自动化工具去处理图片

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

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

美高梅开户网址 24

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:

相关参考资料

一种Sprite图自动化方案的设想

MDN:background-size

1 赞 2 收藏
评论

美高梅开户网址 25

总结

感谢阅读完本小说的读者。本文是作者的个人观点,希望能援助到有连带难点的心上人,若是本文有不妥之处请不吝赐教。


参考资料:

1 赞 4 收藏
评论

美高梅开户网址 26

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图