原创：CSS3技术-雪碧图自适应缩放与精灵动画方案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

background-size: 300% 300%;

这才是最关键的一步，这样单个元素显示一张图

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

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

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

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

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

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

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

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

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

github连接： https://github.com/JsAaron/some-demo/tree/master/sprite-adaptive

原创：CSS3技术-雪碧图自适应缩放与精灵动画方案相关推荐

CSS3实现雪碧图动画
注意几点(以下示例): 雪碧图: 由22张图片拼成的,雪碧图的宽度是设置动画元素的22倍关键帧设置: @keyframes test_anim{ 0%{ background-positio ...
使用css3实现雪碧图帧动画
背景: 此需求是在html界面实现,纯原生,没有像vue生命周期那些东西. 场景: 一个单纯的图片背景,想要在上面加个动图.一瞬间脑子里想到两个方案: 一:最省前端功夫的:ui压缩一个gif图出来二 ...
css3帧（雪碧图）动画实现
所谓雪碧图就是一张图,包含了很多小图,可以通过这些小图实现一个动作,如下是一张雪碧图,我们可以通过CSS的animation来设置背景图片的位置,呈现出一种动态效果. 代码实现 .test{ // 务 ...
CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...
CSS3—雪碧图和滑动门
一.CSS Sprite(雪碧图) CSS Sprite也叫CSS精灵.CSS雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时, ...
css雪碧图动画,CSS3动画——雪碧图的实现
前言作为一个前端的初学者,现在好像已经在nodejs上越跑越偏,之前一直崇拜的CSS3和HTML5动画,如今也好久没有管.因为之前学了好多知识点,但是没有系统的进行总结,就从这篇文章开始,对一些碎片 ...
关于rem布局以及sprit雪碧图的移动端自适应
一.简介早在仁医医疗科技的工作的时候因为要开发微信服务号就接触过rem布局适配移动端.不过当时也是半摸索状态,实际做出来的效果也还不错.基本能适配大部分移动屏幕,而且方法原理也不难理解.但是后面一段 ...
CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

原创：CSS3技术-雪碧图自适应缩放与精灵动画方案

原创：CSS3技术-雪碧图自适应缩放与精灵动画方案相关推荐

最新文章

热门文章