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 Image 模块处理图片

    Python-Image 基本的图像处理操作,有需要的朋友可以参考下. Python 里面最常用的图像操作库是 pip install Pillow #安装模块 from PIL import Ima ...

  2. [drf]源码和序列化梳理

    drf源码继承管理 # drf继承关系 View APIView as_view: 执行父类的as_view 调用dispatch dispatch init_request request.quer ...

  3. SQL-W3School-基础：SQL DISTINCT 语句

    ylbtech-SQL-W3School-基础:SQL DISTINCT 语句 1.返回顶部 1. 本章讲解 SELECT DISTINCT 语句. SQL SELECT DISTINCT 语句 在表 ...

  4. unittest快速装载目前下所有测试用例的方法

    import unittest from BeautifulReport import BeautifulReport #导入BeautifulReport if __name__ == '__mai ...

  5. ehcache快速入门

    前言 JAVA缓存实现方案有很多,最基本的自己使用Map去构建缓存,或者使用memcached或Redis,但是上述两种缓存框架都要搭建服务器,而Map自行构建的缓存可能没有很高的使用效率,那么我们可 ...

  6. 分组卷积+squeezenet+mobilenet+shufflenet的参数及运算量计算

    来一发普通的二维卷积 1.输入feature map的格式为:m * m * h1 2.卷积核为 k * k 3.输出feature map的格式为: n * n * h2 参数量:k * k * h ...

  7. stm32第一章cortex-M3处理器概述

    处理器特点 哈弗结构3级流水线内核 实现Thumb-2指令集,告别切换32位的arm指令和16位的Thumb指令,优化性能和代码密度 结合可配置的嵌套向量中段控制器Nvic,提供非屏蔽中断NMI和32 ...

  8. golang struct组合，转型问题请教

    type Action interface { OnHurt2(other Action) GetDamage() int } type Base struct { atk, hp int } fun ...

  9. Fabric docker-compose volumes配置解析

    chaincode: container_name: chaincode image: hyperledger/fabric-ccenv tty: true environment: - GOPATH ...

  10. 小技巧 Mongodb 动态查询 除去 _class 条件

    最近在做通用模板标准示例项目,在使用  spring data jpa  Mongodb 的时候,动态查询会代入 _class条件. 为什么这么做其实也很好理解,写入数据库的数据中是有这个字段的.接受 ...