今天分享一下刚刚搞定的Logo变色功能的实现方法。
![](http://daogezhiyuan-article.oss-cn-beijing.aliyuncs.com/win3000/pic/42aef725-b21d-4900-adb0-7d094b2d9b9d.jpg)
我的实现方法主要有两个方面,利用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条)
测试