使用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 border-radius属性详解
Jul 05 HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 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 FLEA中二叉树数组的遍历输出
2012/09/26 PHP
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
js用类封装pop弹窗组件
2017/10/08 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python获取目录下所有文件的方法
2015/06/01 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
python实现图片中文字分割效果
2019/07/22 Python
python 遍历pd.Series的index和value
2019/11/26 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
Django密码存储策略分析
2020/01/09 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
python 基于opencv操作摄像头
2020/12/24 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
仓管员岗位责任制
2014/02/19 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
迎新生欢迎词
2015/01/23 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书