留言板  |    文章总数=102  |    RSS订阅
今年是过去十年最差的一年,好消息是,今年是之后十年最好的一年毒鸡汤

用css3实现logo的颜色动态渐变的效果-庆博客一岁生日

2020-05-10     loonlog     286     3

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

      然而今天是本博客一岁生日,岂能不更新一篇文章,也没啥新东西,就分享一下刚刚搞定的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>即可了,本站就是用的此方法!


参考: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

博客

    觉得有用?请点击页面顶部广告支持我!

您可能感兴趣的文章

发表评论(关于评论)

评论列表,共 3 条评论