使用CSS3实现字体颜色渐变的实现


Posted in HTML / CSS onAugust 10, 2020

在使用Animation.css的时候发现它的官网字体会渐变,看了一下他的css很有趣

.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实现字体颜色渐变的实现

到此这篇关于使用CSS3实现字体颜色渐变的实现的文章就介绍到这了,更多相关CSS3字体颜色渐变内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 #HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 #HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 #HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 #HTML / CSS
css3实现小箭头各种图形效果
Jul 08 #HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 #HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 #HTML / CSS
You might like
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
Ionic快速安装教程
2016/06/03 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python实现比较两个列表(list)范围
2015/06/12 Python
python删除不需要的python文件方法
2018/04/24 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
计算机科学与技术应届生求职信
2013/11/07 职场文书
青春奉献演讲稿
2014/05/08 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python