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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS

1

background-size
:

300%

300%
;

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

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

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

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

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

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

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

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

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

github连接 ： https://github.com/JsAaron/adaptive-sprite

时间： 2024-10-29 19:07:49

CSS3技术-雪碧图自适应缩放的相关文章

自适应页面中如何使用雪碧图

自适应页面你肯定听说过,雪碧图想必你也听说过,不过在自适应页面中使用雪碧图应用的场景却不多,因为很多场景里自适应页面(移动端页面)的小图标啥的基本都做成字体图标了,操作起来也比较方便,不过有时候合成字体图标的时候也比较麻烦,AI制作复杂svg矢量图标很麻烦,今天说的这个应用场景用的就是这个情况: 首先你要知道什么是雪碧图,不知道的先科普之,百毒传送门: 上面说到有的场景添加字体图标很麻烦,如果不理解看下图就明白了: 没错,就是这个国旗,有几十个国家的,这要搞成svg矢量图那要累死了(如果有大神有

精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术

精灵图 精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术 原理:将多张单一的图片整合到一张图上,以背景引入,并使用background-position调整背景位置,使之显示不同图片 目的:降低浏览器向服务器的请求次数,提高网页加载速度 优点:降低请求次数,多张图整合成一张降低整体大小,整改一张图使得整体风格主题改变,提高维护性 缺点:自适应布局难控制,制作繁琐,不合理的整合图片会导致调用混乱,一张图更改导致整体变化(牵一发动全身) <div class="s

图片替换技术、雪碧图技术、图片透明技术、常用的电商布局方式

###雪碧图技术### !DOCTYPE html>     <html lang="en">     <head>     <meta charset="UTF-8">     <title>sprite雪碧图技术</title>         <style type="text/css">             div{                 widt

雪碧图技术

一.boder在某些情况下会触发BFC环境,一般用轮廓(outline)而不用边框二.雪碧图技术(精灵图)是一种CSS图像合并技术:(循环):是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分.优点:1)减少加载网页图片时对服务器的请求次数可以合并多数背景图片和小图标,方便在任何位置使用,这样不同位置的请求只需要调用一个图片,从而减少对服务器的请求次数,降低服务器压力,同时提高了页面的加载速度,节约服务器的流量. 2)提高页面的加载速度sprite 技术的其中

雪碧图（图片拼合技术）

雪碧图 (sprite)是一种图片拼合技术: 使用方法: 1.定视口 width: xx px; height: xx px; 2.插图 background-image: url("图片路径"); 3.移动位置 background-position: x轴坐标 y轴坐标: 优点:将小图标拼合到一张图片里,占用内存少,对开发人员来说就不用麻烦给每个小图标命名,还可以有效地加快网页的加载速度,可以有效增强用户体验: 缺点:需要利用相关图片查看软件找到每个小图标的准确坐标,相对来说比较繁

css3 雪碧图实现数字切换

vue中css 雪碧图应用及数字切换demo <template> <div class="total"> <div class="content"> <span class="number" v-for="item in numberObj" :class="item.classObj"></span> </div> </div

什么是雪碧图？它的优缺点是什么？

雪碧图:将多张图片整合到一张图片上,利用ps设置器位置,展示到网页上 <head> <meta charset="UTF-8"> <title>Document</title> <style> .sprite{ /* 1. 定视口 */ width: 180px; height: 180px; border: 1px solid; /* 2. 插图 */ background-image: url("../img/s

响应式下的雪碧图解决方案

一.概述 在传统的居中布局时,我们常用background-position这个属性来进行雪碧图的定位,在减少数据量的同时,保证准确定位.在移动端使用越来越重的现在,以往的传统定位,已经无法达到目的,那么是否有合适的解决方案呢?答案是有的,让我们先来了解background的两个属性: background-position:背景图片相对容器原点的起始位置.详解可以查看另一篇博客:background-position 详解. background-size: 规定背景图的尺寸: 语法:back

CSS中的背景、雪碧图、超链接的伪类样式

一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填充 background-repeat: no-repeat;(有这三个常用的属性值: no-repeat.repeat-x.repeat-y) 4.背景图片大小 background-size:100% 100%: cover(覆盖):(先让图片水平填满容器)图片等比例缩放,直到最小部分填满容器有可能会出现