文字颜色渐变特效

<!DOCTYPE html>
<html>

    <head>
        <meta charset="gbk">
        <title></title>
        <style type="text/css">
            @media (min-width: 650px) {
                .mega {
                    color: #7b8993;
                    font-size: 6rem;
                    line-height: 1;
                }
            }

            h1 {
                font: 100%/2.5 "Roboto", Verdana, sans-serif;
                -webkit-animation: bounceInUp 1s;
            }

            .site__title {
                display: block;
                text-align: center;
                color: blueviolet;
                background-image: -webkit-linear-gradient(0deg, #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);
                }
                to {
                    -webkit-filter: hue-rotate(-360deg);
                }
            }
        </style>
    </head>

    <body>
        <h1 class="site__title mega">我是你大爷</h1>
    </body>

</html>
时间: 2024-09-09 06:41:44

文字颜色渐变特效的相关文章

Flash CS4文字颜色缓动特效

核心提示:Flash CS4文字颜色缓动特效教程. 代码详解: [SWF(backgroundColor=0x000000,width=550,height=400)]//设置场景背景色.大小 var r:uint=0,g:uint=0,b:uint=0;//声明无符号整数型变量r.g.b,初始值都是0 var color:uint,targetR:uint,targetG:uint,targetB:uint;//声明无符号整数型变量color.targetR.targetG.targetB v

Android特效专辑(二)——ViewPager渲染背景颜色渐变(引导页)

Android特效专辑(二)--ViewPager渲染背景颜色渐变(引导页) 首页:http://blog.csdn.net/qq_26787115/article/details/50439020 首页里面也提到过,自己有意做一款杂七杂八的APP,就是自己喜欢什么就加上面,现在本文说的是引导页,我找了很久才觉得可以的开源项目,自己做了一下修改 开源地址:https://github.com/TaurusXi/GuideBackgroundColorAnimation 先来看看效果图吧! 图片用

神奇!js+CSS+DIV实现文字颜色渐变效果_javascript技巧

本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati

IOS绘制动画颜色渐变折线条_IOS

先给大家展示下效果图: 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有的也使用了动画,但是线条颜色渐变的折线图的demo少之又少,甚至可以说没有.该Blog阐述了动画绘制线条颜色渐变的折线图的实现方案,以及折线图线条颜色渐变的实现原理,并附以完整的示例. 成果 本人已将折线图封装到了一个UIView子类中,并提供了相应的接口.该自定义折线图视图,基本上可以适用于大部分需要集成折线图的项目.若你

JavaScript实现文字跟随鼠标特效_javascript技巧

本文实例讲述了JavaScript如何实现文字跟随鼠标特效.分享给大家供大家参考.具体如下: 运行效果图如下: <HTML> <HEAD> <TITLE>鼠标特效--文本围绕鼠标</TITLE> </HEAD> <BODY> <br><br> <center> <font color="red"><h2>鼠标特效--文本围绕鼠标</h2><

jQuery图片渐变特效的简单实现_jquery

jQuery图片渐变特效的简单实现 (document).ready(function() {(document).ready(function() {("div.baba").mouseleave(function() { ("span.aaa").stop().animate({opacity: '1'},600); });("span.aaa").stop().animate({opacity: '1'},600); });("d

Illustrator为文本添加渐变特效效果教程

给各位Illustrator软件的使用者们来详细的解析分享一下为文本添加渐变特效效果的教程. 教程分享: 步骤1 用文本工具新建一个文本,选哪个字体都行.我是偏好Klavika Bold Condensed字体啦.   步骤2 把填充和描边全设为无.如果不这样做,在应用渐变色以后,有时候能看到原始的文本色渗在文本的边缘,这显然不是我们想要的.此外,把填充和描边设为无,在AI CS 4中透明渐变看上去效果才会正常.如果起初没有设置填充色为无,原始文本的颜色将会透过透明渐变渗出来,而不是显示对象或透

带动画渐进效果与颜色渐变的圆弧进度控件设计

带动画渐进效果与颜色渐变的圆弧进度控件设计      今天帮朋友写了一个小巧的圆弧进度控件,控件十分简单,主要设计思路采用CAShapeLayer来创建控件圆弧形状,使用CAGradientLayer来进行颜色渐变的渲染,两者结合来创建出颜色渐变的圆弧进度条控件,关于进度动画采用CoreAnimation动画处理.控件进行了简洁的封装,提供了面向使用的接口,需要的朋友可以自取,Demo地址如下: http://pan.baidu.com/s/1gfqDbtp.       控件中主要提供了,改变

网页设计中文字颜色的搭配技巧

技巧|设计|网页|网页设计|中文 对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但浏览一下大型的商业网站,你会发现他们更多运用的是白色.蓝色.黄色等,使得网页显得典雅,大方和温馨.更重要的是,这样可以大大加快浏览者打开网页的速度. 一般来说,网页的背景色应该柔和一些.素一些.淡一些,再配上深色的文字,使人看起来自然.舒畅.而为了追求醒目的视觉效果,可以为标题使用较深的颜色.下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可