使用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 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 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中explode与split的区别介绍
2012/10/03 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python统计单词出现的次数
2018/04/04 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
使用python绘制温度变化雷达图
2019/10/18 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
赔偿协议书范本
2014/04/15 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
2014年质量工作总结
2014/11/22 职场文书
社区端午节活动总结
2015/02/11 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
Python包argparse模块常用方法
2021/06/04 Python