在rem布局下使用背景图片以及sprite,Coca Cola图在缩放场景下的独特处理

CSS3技艺-Sprite图自适应缩放

2015/08/20 · CSS ·
雪碧图

原文出处:
Aaron的博客   

花了一个礼拜已毕了慕课网定制的端午大旨效果,其中有一个没兑现好的功力,就是7-Up图的自适应缩放

ps: 以下完结都是按照移动端的处理

原图如下: 人物是运用的是七喜图,通过坐标相对数量取值

亚洲必赢官网 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 ·
在rem布局下使用背景图片以及sprite,Coca Cola图在缩放场景下的独特处理。动画

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

小编所在的前端团队紧要从事移动端的H5页面开发,而公司选取的适配方案是:
viewport units + rem。具体可以瞻仰凹凸实验室的稿子 –
使用视口单位贯彻适配布局

小编近日(2017.08.12)接触到的移位端适配方案中,「利用视口单位落到实处适配布局」是最好的方案。然而使用
rem 作为单位会赶上以下多个难题:

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

首个难点的家常出现在 icon 绘制进度,可以使用图片或者
svg-icon 解决那么些标题,小编强烈提议使用
svg-icon,具体理由可以瞻仰:「拥抱Web设计新势头:SVG
Coca Colas实践应用」。

第三个困难小编举个例证来分析抖动的来由和搜索解决方案。

Pepsi-Cola图在缩放场景下的越发处理

2016/07/13 · CSS ·
雪碧图

原稿出处: 百度EFE   

回想n年前刚写前端的时候,在拍卖一个’鼠标hover切换背景图会闪’的题材时,将两张背景图合成一张图片,顺利解决难题。那应当是自我先是次用到Coca Cola图的情形。

亚洲必赢官网 10

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举办配备,而这一个特性其实是效果于漫天七喜图上的。

双倍设计稿

为了能在视网膜屏下清晰展示,现在的设计稿一般都是依照魅族5的大幅度(320)或者iphone6的增幅(375),举办双倍。也就是说,设计稿的涨幅相似是640要么750.

其一尺寸也不是纯属的,因为红米6
plus的dpr值为3,也有设计稿举办三倍尺寸,那样能在三星6
plus上圆满突显。当然对于Android设备来说意况就更扑朔迷离了,dpr值什么样的都有,所以双倍设计稿算是一个折中方案,大体上能保障所有装备清晰体现图片。

那时,我们在页面上还要做一件业务,这就是动态设置<meta>中的viewport属性,将scale改成0.5(dpr为2)或者此外值,那样大家写css的时候,就可以根据原设计稿的尺码来写了。

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

解决方案

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

远道而来的化解方案

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

  1. background-size 功用于漫天7-Up图,对其尺寸缩放。
  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

图片

综上,要是想在Sprite图内达成缩放逻辑,必须透过

  • 百事可乐图长宽
  • 该图标原始长宽
  • 该图标在百事可乐图中的偏移量

一共6个变量去完成。用动态样式语言的话,或许可以拿走这么一个通用函数:

CSS

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

如上,大家做到了把7-Up图中的图标缩放后表现在页面上的这一对象。

什么,看到那么些解决方案,有没有一种把代码删光,把大中小多少个图标都塞进7-Up图的冲动?

cover与contain

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

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

地点说的“可能”的情事,暴发在要素尺寸和图片尺寸宽高比例不雷同的时候。

上面通过例子来演示一下这二者的用法。比如我们以BlackBerry5为例,此时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

依照上图,其实很简单就联想到一个简练的方案:不用Pepsi-Cola图(即一帧对应一张图纸)
本条方案确实是可以解决抖难题,然而小编并不引进应用它,因为它有八个负面的事物:

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

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

萧条一下,再思考方案

不就是缩放么?background-size会扯出这么多难题,不是还有个transform么?会并发一样的难题么?
那么要博取不错的功力的话,以松手两倍为例,须求形成:
恩?好像就加一行代码?

CSS

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

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

行吗,就是这么。两者分别也很简单,因为一个效应在要素上,一个效应在Coca 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. 最无脑的一切放进Sprite图中
  2. 最冗长的修改background-size
  3. 以及最简便的transform变形

一般境况下,仍然无视第三种方案吧。那么在1和3两者中间,则各有拔取。现在回想整个寻求解决方案的历程,个人仍旧比较赞同方案1的,毕竟,大概从未什么样出错的可能。而且都是一样张百事可乐图,并不曾更多的伏乞数,只是多了点图片大小而已。

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:

连带参考资料

一种Pepsi-Cola图自动化方案的设想

MDN:background-size

1 赞 2 收藏
评论

亚洲必赢官网 25

总结

感谢阅读完本小说的读者。本文是小编的个人观点,希望能帮忙到有相关难点的对象,若是本文有不妥之处请不吝赐教。


参考资料:

1 赞 4 收藏
评论

亚洲必赢官网 26

网站地图xml地图