原创: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 动画实现方法大全(*****************************星级文章*************************)
- [web前端] css3 transition属性实现3d动画效果
- css3中什么时候用transition什么时候用animation实现动画
- [翻译] Canvas 不用写代码的动画
- core Animation之CAKeyframeAnimation(关键帧动画)
- Js点击触发Css3的动画Animations、过渡Transitions效果
- css3旋转动画
- css3动画(animation)效果3-正方体合成
- css3 Transition动画执行时有可能会出现闪烁的bug
- Css 动画的回调
- 动画--过渡函数 transition-timing-function
- vue.js 3.2.22:菜单每行依次滑动出现的动画
- SAP UI5 Fiori flower动画效果的实现明细
- 前端进阶必学必会动画学习之Animate.css的使用与解析:一个强大而酷炫的CSS3动画库Animate.css使用方法教程
- 前端扫描效果CSS3 animation 属性实现“扫一扫”动画效果
- Android 9.0 系统关机动画的功能实现
- 【MATLAB】布朗运动动画仿真
- HTML5 Canvas动画效果实现原理
- CSS3 3D旋转动画代码实例
- facebook打开动画pop