使用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实现简易版的刮刮乐效果
Sep 27 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 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
一个SQL管理员的web接口
2006/10/09 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
如何运行Python程序的方法
2013/04/21 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python实现的弹球小游戏示例
2017/08/01 Python
查看python下OpenCV版本的方法
2018/08/03 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
python中树与树的表示知识点总结
2019/09/14 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
遗产继承公证书
2014/04/09 职场文书
企业文化演讲稿
2014/05/20 职场文书
服务整改报告
2014/11/06 职场文书