使用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 相关文章推荐
css3弹性盒模型实例介绍
May 27 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
css3带你实现3D转换效果
Feb 24 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
基础的WordPress插件制作教程
2015/11/24 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
Python批量按比例缩小图片脚本分享
2015/05/21 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
一套C#面试题
2013/10/09 面试题
2015元旦标语横幅
2014/12/09 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
中秋节主题班会
2015/08/14 职场文书
java解析XML详解
2021/07/09 Java/Android
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技