使用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 25 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php+mysql 实现身份验证代码
2010/03/24 PHP
php5.3 废弃函数小结
2010/05/16 PHP
php 安全过滤函数代码
2011/05/07 PHP
mac下安装nginx和php
2013/11/04 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
JS 控件事件小结
2012/10/31 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
javascript常用的设计模式
2017/02/09 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python子类继承父类构造函数详解
2019/02/19 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
python3中rank函数的用法
2019/11/27 Python
Python创建数字列表的示例
2019/11/28 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
美国家居装饰店:Pier 1
2019/09/04 全球购物
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
维稳工作承诺书
2015/01/20 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL