最近一直忙于DIY一个DC-ATX电源板，目的是用上废旧笔记本电源为NAS供电，又完美的实现整机静音效果，从原理图到PCB，到全网找便宜的元器件购买，再到焊接，时至今日，才焊完一半，还不知道能不能用呢，这其间最意外的是，选型的元器件太贵了，失算。

      然而今天是本博客一岁生日，岂能不更新一篇文章，也没啥新东西，就分享一下刚刚搞定的字体Logo和logo变色功能的实现方法吧。

      我的实现方法主要有两个方面，利用CSS3动态渐变字体效果，实现起来已经非常成熟稳定，那logo是图片怎么办，试过几个方法都不行，于是想到，何不把logo转换成字体，很完美呀！

SVG图片logo转换为Web字体图标

我们的web经常会用到一些图标，其实都是和字体一样的（其实这里我并没有完全清楚），我感觉，字体也是图片。

（1）准备工作，既然我们有logo了，肯定是矢量图，然后导出SVG格式的图片；

（2）字体制作，进入 https://icomoon.io  网站在线制作；

点击 icomoon APP  ->  import icons 导入SVG图片，

（3）点击右下角的Generate Font生成字体文件，然后会出来Download按钮，继续点击下载文件；

（4）解压下载的包，会看到很多文件，这里是一个demo，点击demo.html文件，会看到图标后面有一串字符：icon-loonlog-logo，这就是后面要使用的类名；

（6）把css和font文件夹拷贝到你的网站工程相应目录，在html里面直接使用<i class="icon-loonlog-logo" style="font-size: 150px"></i>即可了，本站就是用的此方法！

参考：https://www.cnblogs.com/RAINHAN/p/6188298.html

css3文字颜色动态渐变

.logo{
    height: 60px;
    color: #f35626;
    background: coral;
    background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 6s infinite linear;
}
@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}

以上即可对字体进行颜色动态渐变了，具体我也是直接拷贝！

用到了这几个属性

• background-clip

• text-fill-color

• filter: hue-rotate

background-clip

CSS3 属性 规定背景的绘制区域 W3school上面只展示了三个值 CSS3 background-clip 属性

border-box       # 背景被裁剪到边框盒。

padding-box       # 背景被裁剪到内边距框。

content-box       # 背景被裁剪到内容框。

上面用到的-webkit-background-clip: text; 必须加上-webkit-前缀，不然浏览器不能正常渲染。text的效果就是背景颜色被剪裁到文字上面，只有文字会显示背景颜色。这个属性可以做类似ktv里面歌词视图的效果。具体效果参考 犀利的background-clip:text，实现K歌字幕效果

text-fill-color

text-fill-color,表示文字颜色填充，实现的效果基本上与color一样，会覆盖color所定义的字体颜色.也支持一个transparent属性，也就是透明填充。

filter: hue-rotate

hue-rotate用来设置对象的色相旋转。用0-360数字表达

结合以上三个属性结合动画，最终实现文字渐变的效果。

参考：https://segmentfault.com/a/1190000012232342?utm_source=tag-newest