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. kotlin中匿名对象

    open class MyClass { private fun too()=object { var x : String ="x" } fun publictoo()=obje ...

  2. 08ListView动态列表组件 以及循环动态数据

    效果: main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* ListView:参数 scr ...

  3. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_19-CMS前端页面查询开发-页面原型-Table组件测试

    页面填充内容.用一个表格来显示内容 3.1.2.1 Element-UI介绍 本项目使用Element-UI来构建界面,Element是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面 ...

  4. [转]Android 应用自动更新及6.0，7.0，8.0适配安装

    原贴:https://www.jianshu.com/p/ea42040c7ace 原贴:https://www.jianshu.com/p/ea42040c7ace 原贴:https://www.j ...

  5. 游戏数值——LOL篇 以LOL为起点-说游戏数值设计核心思路

      附     文   文档在今年三月份我动笔写了一小部分,但当时思路凌乱,行文梗阻,于是丢在一边构思了半年,现在又回过头来慢慢写,希望能写好写完吧,初衷是希望即时萌新也能看懂,但是好像并不能行——本 ...

  6. 使用linux flock文件锁实现任务锁定避免计划任务程序冲突

    格式:flock [-sxun][-w #] fd#flock [-sxon][-w #] file [-c] command选项-s, --shared: 获得一个共享锁 -x, --exclusi ...

  7. 同一个电脑配置两个github账号

    mac中.ssh文件夹在根目录下,所以表示成 ~/.ssh/. 一.同一个电脑配置两个github账号1.分别为两个GitHub账号生成SSH密钥 $ cd ~/.ssh $ ssh-keygen - ...

  8. MongoDB可视化工具Studio 3T的使用

    原文地址:https://blog.csdn.net/weixin_39999535/article/details/81383196 studio3T 永久使用方法 新建文件studio3t.bat ...

  9. Grep---linux系统三剑客（一）

    grep .sed.awk被称为linux中的"三剑客". grep 更适合单纯的查找或匹配文本 sed  更适合编辑匹配到的文本 awk  更适合格式化文本,对文本进行较复杂格式 ...

  10. d3学习之路

    d3学习历程: 轻量化编译器:HbuiderXHbuiderX使用教程   理解HTMl js CSS 三者关系   学习html js css :1)w3school           2)moo ...