使用CSS3实现字体颜色渐变的实现


Posted in HTML / CSS onAugust 10, 2020

在使用Animation.css的时候发现它的官网字体会渐变,看了一下他的css很有趣

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

这里使用 -webkit-background-clip: text 来裁剪背景图片只留下text的部分

然后使用 -webkit-text-fill-color: transparent 来设置文字填充颜色透明

使用hue动画,在60s内来调整色相从0deg到-360deg,就实现了字体颜色随时间渐变的效果

使用CSS3实现字体颜色渐变的实现

到此这篇关于使用CSS3实现字体颜色渐变的实现的文章就介绍到这了,更多相关CSS3字体颜色渐变内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 #HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 #HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 #HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 #HTML / CSS
css3实现小箭头各种图形效果
Jul 08 #HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 #HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 #HTML / CSS
You might like
PHP 数组实例说明
2008/08/18 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
php模板引擎技术简单实现
2016/03/15 PHP
php 数组元素快速去重
2017/05/05 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
python怎么调用自己的函数
2020/07/01 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
如何唤起类中的一个方法
2013/11/29 面试题
ktv中秋节活动方案
2014/01/30 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
看上去很美观后感
2015/06/10 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers
python数字图像处理:图像的绘制
2022/06/28 Python