示例：Mauger`s Blog

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Mauger`s Blog</title>

    <style type="text/css">

        body {

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            background-color: black;

        }

        .color-a {

            font-size: 48px;

            color: #696969;

            text-decoration: none;

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

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            -webkit-animation: hue 60s infinite linear;

        }

        @-webkit-keyframes hue {

            from {

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

                filter: hue-rotate(0deg);

            }

            to {

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

                filter: hue-rotate(360deg);

            }

        }

        @keyframes hue {

            from {

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

                filter: hue-rotate(0deg);

            }

            to {

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

                filter: hue-rotate(360deg);

            }

        }

    </style>

</head>

<body>

    <a href="https://maugerwu.github.io/" class="color-a">Welcome To Mauger`s Blog</a>

</body>

</html>

CSS3-字体渐变色的更多相关文章

  1. CSS3文字描边 CSS3字体外部描边

    给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...

  2. CSS3 字体

    CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您您找到或购买到希望使用的 ...

  3. 收集的可以下载css3字体图标的网站

    http://icomoon.io/app/ 可以选择跟简单调整图标打包成css3 字体下载, http://www.flaticon.com/categories/weapons

  4. css3 字体、2D转换、3D转换

    学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...

  5. CSS3字体模块

    介绍 字体提供了包含字符的视觉表现的资源.在最简单的等级中,其包含由字符编码到表示这些字符的形状(被称为字形)的映射信息.根据一组标准字体属性被分入一个字体家族的字体共享一个通用设计风格.在一个家族中 ...

  6. 绝对干货！！css3字体图标—丰富的阿里图标库iconfont的使用详解

    在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大 ...

  7. CSS3字体大小rem属性用法

    PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较精确和固定. 只要页面某元素设置了px字体大小,其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素 ...

  8. CSS3 外发光 渐变色

    渐变色--线性渐变 linear-gradient #bg { width: 100%; background: -webkit-linear-gradient(#9f1c65, #d89068,#7 ...

  9. CSS3字体图标

    网址:http://icomoon.io/http://iconfont.cn/  阿里巴巴字体库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  10. css3字体

    1.定义个性化字体 @font-face{ font-family:字体名字; src:字体地址,可以多写几个用逗号隔开兼容浏览器 } div{ font-family:字体名字/*使用字体*/ } ...

随机推荐

  1. oracle汉字转拼音(获得全拼/拼音首字母/拼音截取等)

        oracle汉字转拼音(获得全拼/拼音首字母/拼音截取等)   效果如下: Oracle 字符集 GBK 没有问题 , UTF -8 需要修改一下   Sql代码   --oracle汉字转拼 ...

  2. pyqt5-QWidget坐标系统和大小

    获取坐标和尺寸: 坐标的获取视频教程:https://v.qq.com/x/page/t085892mzh9.html  x()    y()   返回控件的坐标 相对于父控件的坐标(窗口框架左上角) ...

  3. 实时监听 input值的变化

    重点:$('#xx').bind('input propertychange', function() {} 举例子: html: <div ><span id="numb ...

  4. (6)Java数据结构-- 转：JAVA常用数据结构及原理分析

    JAVA常用数据结构及原理分析  http://www.2cto.com/kf/201506/412305.html 前不久面试官让我说一下怎么理解java数据结构框架,之前也看过部分源码,balab ...

  5. Tip：什么是JavaBean

    可视化JavaBean  非可视化JavaBean(分:值JavaBean和工具JavaBean) JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参 ...

  6. 2017-2018-2 20165237 实验二《Java面向对象程序设计》实验报告

    ##2017-2018-2 20165237 实验二<Java面向对象程序设计>实验报告 No.1 实验要求: 实验三 敏捷开发与XP实践 http://www.cnblogs.com/r ...

  7. pythonのscrapy抓取网站数据

    (1)安装Scrapy环境 步骤请参考:https://blog.csdn.net/c406495762/article/details/60156205 需要注意的是,安装的时候需要根据自己的pyt ...

  8. 第一次发博，发个简单的Java程序发送手机短信验证

    最近在准备一个项目,想的登录时候用手机验证,就通过上网查阅了一下手机验证的实现方法,原来超级简单,下面将一步一步介绍. 1.去中国网建注册一个账号密码,首次注册送五条免费短信和3条免费彩信.具体的网址 ...

  9. Spring Boot：如何配置静态资源的地址与访问路径

    spring.resources.static-locations=classpath:/static,classpath:/public,classpath:/resources,classpath ...

  10. CPU 利用率背后的真相，只有 1% 人知道【转】

    导读:本文翻译自 Brendan Gregg 去年的一篇博客文章 “CPU Utilization is Wrong”,从标题就能想到这篇文章将会引起争议.文章一上来就说,我们“人人皆用.处处使用,每 ...