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


Posted in HTML / CSS onMarch 09, 2021
.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实现字体颜色渐变的实现

HTML / CSS 相关文章推荐
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
纯CSS3实现质感细腻丝滑按钮
Mar 09 #HTML / CSS
css动画效果之animation的常用样式
Mar 09 #HTML / CSS
CSS心形加载的动画源码的实现
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
详解CSS样式中的 !important * _ 符号
a标签的css样式四个状态
Mar 09 #HTML / CSS
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
You might like
PHP应用JSON技巧讲解
2013/02/03 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
python中如何使用朴素贝叶斯算法
2017/04/06 Python
利用Python如何生成便签图片详解
2018/07/09 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
python能自学吗
2020/06/18 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
开门红主持词
2014/04/02 职场文书
离职感谢信怎么写
2015/01/22 职场文书
领导干部失职检讨书
2015/05/05 职场文书
工作收入证明范本
2015/06/12 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis