【CSS】组装图标

    一般情况下,图标总是事先做成图片然后直接拿来调用就行了。但是碰到一个状况需要做3分比例饼图,采用3种颜色标识不同内容在总体所占的比例,简单起见,所占比例为1/8的倍数。效果如下:

    组装图标效果

    这样把每一个比例单独做个图,未免工作量过大,没算错的话需要做45个图;当然你可能会想到用程序去生成图,但也要会图像编程才行,这里先不考虑。



    我的方法是把图分解,做一张灰圆,然后分别做8个不同8分比例的浅蓝、深蓝扇形,这个做起来还是比较方便的。做好后利用雪碧工具把图拼合成一张,如下:

    原始图标

    利用gif图片的透明性进行CSS组装,如下

    提示:你可以先修改部分代码再运行。

    源码下载:CSS拼装图标源码

    参考文章: Tencent ISD Webteam《由黄钻等级图标处理引发的思考



    本博客所有文章如无特别注明均为原创。
    复制或转载请以超链接形式注明转自枫芸志,原文地址《【CSS】组装图标
    标签:
    分享:

还没有人抢沙发呢~

无觅相关文章插件,快速提升流量