【原创】【设计小舍】美化数字

本期主要通过精灵图实现数字美化，同理，还可以实现精灵图图标（不过现在流行字体图标）

❤️精灵图
精灵图又叫雪碧图，是一种将小图标合成大图标的方式，这样的好处就是，只需要请求一张图片，就可以获取所有图标，是减少服务器压力的一种处理方式

虽然当下字体图标盛行，但对于流量大的站点，依旧会优先选择精灵图，类似【图一】

接下来本文就实现把数字美化为精灵图里的数字

🧡如果读者使用的是图一的图片，那要注意自行调整背景距离，因为传输过程中我有进行裁剪，剪掉了不必要的部分，如果参数按我教程中的写是有偏差的

❤️实现基础样式
一开始我们先不考虑如何展示特定数字，而是先把每个数字成功实现渲染

实现整张精灵图定位【图二】

实现每个数字定位（自己调整即可，不放完整版了，不然占太大板面）【图三】

DOM结构【图四】

最终效果如【图五】

当然，这个精灵图有两部分数字，我们同样实现下
【图六】

效果如【图七】

🧡原理就是先把一张精灵图除以【每个数字】的宽高得到百分比（或者像素也行），然后每个数字其实就是一个dom元素的背景，我们只需要偏移背景，就能获取不同位置的不同数字样式

❤️实现根据数字进行渲染
上面我们是写死了，这样很明显不满足需求，所以简单实现下渲染函数【图八】，注释蛮多，这里就不赘述了

最后进行测试【图九】

那么本文就到此结束了，样式这块都比较精简易懂，文章也不会太长

[彩虹]pluie
[彩虹]2023-04-17