使用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实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
html实现弹窗的实例
Jun 09 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 intval的测试代码发现问题
2008/07/27 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
php中rename函数用法分析
2014/11/15 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
理解javascript闭包
2015/12/15 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
Mac下安装vue
2018/04/11 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
python关键字and和or用法实例
2015/05/28 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
pycharm安装和首次使用教程
2018/08/27 Python
python使用多进程的实例详解
2018/09/19 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
园林系毕业生求职信
2014/06/23 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
运动会演讲稿200字
2014/08/25 职场文书
中秋节感想
2015/08/10 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers