本期主要通过精灵图实现数字美化,同理,还可以实现精灵图图标(不过现在流行字体图标)
❤️精灵图
精灵图又叫雪碧图,是一种将小图标合成大图标的方式,这样的好处就是,只需要请求一张图片,就可以获取所有图标,是减少服务器压力的一种处理方式
虽然当下字体图标盛行,但对于流量大的站点,依旧会优先选择精灵图,类似【图一】
接下来本文就实现把数字美化为精灵图里的数字
🧡如果读者使用的是图一的图片,那要注意自行调整背景距离,因为传输过程中我有进行裁剪,剪掉了不必要的部分,如果参数按我教程中的写是有偏差的
❤️实现基础样式
一开始我们先不考虑如何展示特定数字,而是先把每个数字成功实现渲染
实现整张精灵图定位【图二】
实现每个数字定位(自己调整即可,不放完整版了,不然占太大板面)【图三】
DOM结构【图四】
最终效果如【图五】
当然,这个精灵图有两部分数字,我们同样实现下
【图六】
效果如【图七】
🧡原理就是先把一张精灵图除以【每个数字】的宽高得到百分比(或者像素也行),然后每个数字其实就是一个dom元素的背景,我们只需要偏移背景,就能获取不同位置的不同数字样式
❤️实现根据数字进行渲染
上面我们是写死了,这样很明显不满足需求,所以简单实现下渲染函数【图八】,注释蛮多,这里就不赘述了
最后进行测试【图九】
那么本文就到此结束了,样式这块都比较精简易懂,文章也不会太长
[彩虹]pluie
[彩虹]2023-04-17
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...