css3控制字体动态变换颜色

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>css3文字颜色更改</title>

</head>

<style>

.site__title {

color: #f35626;

font-family: 微软雅黑;

background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

-webkit-animation: hue 10s infinite linear;

}

@-webkit-keyframes hue {

from {

-webkit-filter: hue-rotate(0deg);

-moz-filter: hue-rotate(0deg);

}

to {

-webkit-filter: hue-rotate(-360deg);

-moz-filter: hue-rotate(-360deg);

}

}

</style>

<body>

<h1 class="site__title">色彩会变</h1>

</body>

</html>

css3控制字体动态变换颜色的更多相关文章

  1. linux BASH shell设置字体与背景颜色

    linux BASH shell下设置字体及背景颜色的方法. BASH shell下设置字体及背景颜色  echo -e "\e[31mtest\e[41m"  \e[30m 将字 ...

  2. linux BASH shell下设置字体及背景颜色

    BASH shell下设置字体及背景颜色 echo -e "\e[31mtest\e[41m" \e[30m 将字符的显示颜色改为黑色 \e[31m 将字符的显示颜色改为红色 \e ...

  3. 01 《i》控制字体大小 v-for循环绑定类名 v-bind 结合三目运算 动态添加类

    1==>控制字体图标的大小用 font-size:16px; <i class="el-icon-arrow-left right-show-aside-icon"&g ...

  4. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

  5. CSS 之动态变换背景颜色

    先上效果图 HTML代码: 123456789 <div class="header"> <h1>GCCHRN'S BLOG</h1> < ...

  6. 本周推荐7款CSS3实现的动态特效

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  7. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  8. NSString -- UILabel中字体有多种颜色,字符串自动计算高度/换行

    一:UILabel中字体有多种颜色 UILabel *label = [[UILabel alloc] init]; label.frame = CGRectMake(, , , ); label.b ...

  9. CSS3实现字体描边

    CSS3实现字体描边的两种方法 -webkit-text-stroke: 1px #fff;:不建议,向内描边,字体颜色变细,效果不佳: 用box-shadow模拟描边,向外描边,保留字体粗细,赞! ...

随机推荐

  1. x86 linux下如何交叉编译?

    答: 需要首先指定两个环境变量CROSS_COMPILE和ARCH 如交叉编译arm64的程序: export CROSS_COMPILE="aarch64-linux-gnu-" ...

  2. 15 Flutter BottomNavigationBar自定义底部导航条 以及实现页面切换 以及模块化

    效果: /**  * Flutter  BottomNavigationBar 自定义底部导航条.以及实现页面切换:  * BottomNavigationBar是底部导航条,可以让我们定义底部Tab ...

  3. scikit-learn机器学习(二)逻辑回归进行二分类(垃圾邮件分类),二分类性能指标，画ROC曲线，计算acc,recall,presicion,f1

    数据来自UCI机器学习仓库中的垃圾信息数据集 数据可从http://archive.ics.uci.edu/ml/datasets/sms+spam+collection下载 转成csv载入数据 im ...

  4. 使用xdebug调试程序后程序很慢的原因

    有一个原因就是开启调试的会话没有正确的关闭,即PhpStorm这边关闭了而没有通知服务端xdebug关闭,导致服务器资源被耗尽,这时只有重启服务端的服务才可以. 所以必须保证每一个调试会话被正确关闭. ...

  5. Java工程师学习指南第6部分：深入理解JVM虚拟机

    本文整理了微信公众号[Java技术江湖]发表和转载过的JVM虚拟机相关优质文章,想看到更多Java技术文章,就赶紧关注本公众号吧吧. JVM原理分析,看了都说好 JVM 深入学习:Java 解析 Cl ...

  6. 安装flask_mysqldb出现报错问题解析

    安装 mysqldb (pip3 install Flask-MySQLdb)报错 EnvironmentError: mysql_config not found ERROR: Command er ...

  7. 修改阿里源为Ubuntu 18.04默认的源

    步骤如下: Step1:备份/etc/apt/sources.list sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak Step2:在/ ...

  8. Git速成学习第六课：Bug分支

    Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng.com/ 当你接到一个修复代码为101的任务的时候,很自然的你想创建一个分支issue-101来修复它,但 ...

  9. WCF服务的Web HTTP方式

    NET 3.5以后,WCF中提供了WebGet的方式,允许通过url的形式进行Web 服务的访问.现将WCF服务设置步骤记录如下: endpoint通讯协议设置成  webHttpBinding en ...

  10. vue操作数组时遇到的坑

    用vue操作数组时,一般就那几个方法,而且是可以渲染的,但是有时候列表是渲染不了的先说下操作数组的几个方法吧 1 push ( ) 这个方法是在数组的最后面添加元素 用法:  括号里写需要加入的元素  ...