单字体颜色美化小类库Charming.js





如果在网页设计开发过程中, 如果需要有效针对文字中单个文字的颜色进行设计的话,使用纯CSS会非常的繁琐,这里介绍一个“瑞士小军刀“ - charming.js ,它能够帮助你快速生成基于单个字符的文字样式设计,效果如下:



相关代码,请参考如下地址,使用了vanilla的语法方式实现的文字颜色特效

Javascript

  <script src="https://wzrd.in/standalone/charming@latest"></script>
  <script>
    var element = document.querySelector("h1");
    charming(element);
  </script> 


CSS

    .char1 {
      color: #666;
    }
    .char2 {
      color: #777;
    }
    .char3 {
      color: #888;
    }
    .char4 {
      color: #999;
    }
    .char5 {
      color: #aaa;
    }
    .char6 {
      color: #bbb;
    }
    .char7 {
      color: #ccc;
    }

    .char8 {
      color: #ddd;
    }

    .char9 {
      color: #eee;
    }


在线演示

访问地址:  http://www.igeekbar.com/igclass/code/9e464070-b9f3-4a6e-b72d-cc3654a72602.htm

更多代码和语法说明请参考相关地址,如下:


FT姥爷   知名教育公司非知名技术VP

喜欢研究互联网产品相关UI/UX及代码实现,业余时间喜欢骑摩托车和拳击的程序猿大叔~~
     扫一扫立刻加入iGeekBar会员QQ群(545980198)
    和更多iG客会员交流分享吧~