使用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动画效果
Aug 14 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 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
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
php发送邮件的问题详解
2015/06/22 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
深入解析Python中的__builtins__内建对象
2016/06/21 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python爬虫超时的处理的实例
2018/12/19 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
pytorch 共享参数的示例
2019/08/17 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
印度网上药店:1mg
2017/10/13 全球购物
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
Python基础详解之描述符
2021/04/28 Python
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android