今天分享一下刚刚搞定的Logo变色功能的实现方法。
我的实现方法主要有两个方面，利用CSS3动态渐变字体效果，实现起来已经非常成熟稳定，那logo是图片怎么办，试过几个方法都不行，于是想到，何不把logo转换成字体，很完美呀！
SVG图片转换为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>即可了，本站就是用的此方法！
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数字表达
结合以上三个属性结合动画，最终实现文字渐变的效果。
文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/Use%20css3%20to%20achieve%20the%20effect%20of%20dynamic%20gradient%20of%20logo%20color.html
支付宝扫一扫 
评论列表（196条）
测试