热门
join now

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

编程相关7个月前更新 云程
38 0 0

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

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

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

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

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

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

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

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

DOM结构【图四】

最终效果如【图五】

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

效果如【图七】

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

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

最后进行测试【图九】

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

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

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

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...