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. python小白之字典使用笔记

    Python 字典(Dictionary)   字典是一种可变容器模型,且可存储任意类型对象. 每个键值 key=>value 对,用冒号 : 分割 每个键值对之间用逗号 , 分割 整个字典包括 ...

  2. C++ STL copy copy_backward

    #include <iostream>#include <algorithm>#include <vector>#include <functional> ...

  3. [Scikit-learn] Yield miniBatch for online learning.

    From: Out-of-core classification of text documents Code:  """ ======================= ...

  4. List 的删除

    List 不要在循环中使用remove 删除.可以新加一个List ,把符合条件的元素加入到这个list 中,然后调用removeAll . 比如:(增强for 循环需要判断 list 是否是 nul ...

  5. Python基础-day04

    函数基础 目标 函数的快速体验 函数的基本使用 函数的参数 函数的返回值 函数的嵌套调用 在模块中定义函数 01. 函数的快速体验 1.1 快速体验 所谓函数,就是把 具有独立功能的代码块 组织为一个 ...

  6. 请求路径@PathVariable注释中有点.英文句号的问题（忽略英文句号后面的后缀）

    前端页面请求地址 <video id=example-video width=960 height=540 class="video-js vjs-default-skin" ...

  7. linux如何添加服务为系统服务快速启动或关闭

    当在linux系统安装了一些服务比如apache,mysql,iptables等等后想快速启动或者重启 但是在使用系统启动或者关闭服务时候发现输入指令 >service httpd restar ...

  8. EMC DS300B光纤交换机扩展光口license

    一.通过EMC指定的网站激活license 激活license,生成激活码需要三个信息: 1.交换机WWN号:可在交换机铭牌上查看:(16位) 2.SN号码:AQA00***9*6(11位) 3.ke ...

  9. 【极简版】OpenGL 超级宝典（第五版）环境配置 VS2010

    事先声明:该教程仅适用于VS2010环境下超级宝典第五版的配置 第一步:下载示例代码和环境包: 链接:https://pan.baidu.com/s/1llRRQ8ymBgMGuXp5M50pJw 提 ...

  10. Vuetify Warning: Unable to locate target [data-app]

    今天在大改 nuxt 项目 layout 的时候,将 Vuetify 的 side nav 换成 Element 的折叠式 nav 后,发现了一个 Warning,虽然不影响使用,但是控制台输出一堆, ...