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. Kontln的属性形式Getter和Setter

    package loaderman.demo class Person { val name: String get() = "name" var v: Int = 0 var v ...

  2. zookeeper-3.5.5安装报错：找不到或无法加载主类 org.apache.zookeeper.server.quorum.QuorumPeerMain

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/jiangxiulilinux/artic ...

  3. TensorFlow Object Detection API —— 制作自己的模型

    https://blog.csdn.net/qq_24474463/article/details/81530900 (t20190518) luo@luo-All-Series:~/MyFile/T ...

  4. mfc移动文件夹

    SHFILEOPSTRUCT FileOp; ZeroMemory((void*)&FileOp,sizeof(SHFILEOPSTRUCT)); FileOp.fFlags = FOF_NO ...

  5. gitlab安装、下载、推送 代码（推荐）

    环境: 内存必须5G以上 centos7.5 服务端:192.168.0.74 客户端:192.168.0.73 GitLab的安装 1.在CentOS系统上,下面的命令将会打开系统防火墙HTTP和S ...

  6. iOS-项目重构（浅谈）

    如何重构 首先,要对程序的一般架构烂熟于心,尤其是MVC,这是基本.还有就是分离存储和网络请求的逻辑. 对于一些常用的控件尽量分离复用,设置开关函数,适当的时候开启,不要的时候关闭,有必要的话还可以 ...

  7. [Python[PyQt]] ModuleNotFoundError: No module named 'PyQt5.QtWebEngineWidgets'

    解决办法: pip install PyQtWebEngine

  8. QFramework 使用指南 2020（六）：脚本生成（4）小结与补充

    我们花了四篇文章,介绍了 QF 中的脚本生成功能. 实际上 QF 中的脚本生成是有两种的,第一种就是我们现在学习的 ViewController + Bind 模式. 这种模式是为除 UGUI 以外的 ...

  9. 【VS开发】QueryPerformanceFrequency与QueryPerformanceCounter的使用

    LARGE_INTEGER tima,timb; QueryPerformanceCounter(&tima); 在 Windows Server 2003 和 WindowsXP 中使用 Q ...

  10. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...