css3文字颜色渐变的实现方法有很多，下面我就在这里为大家介绍

    css3文字颜色渐变的方法一：通过css3的动画属性实现css文字动态颜色渐变

    <h2>文字颜色渐变</h2>

    h2{

    height:60px;

    color:#f35626;

    background:coral;

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

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    -webkit-animation:hue6sinfinitelinear;

    }

    @-webkit-keyframeshue{

    from{

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

    }

    to{

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

    }

    }

    效果如下（截取的是静态图片，但实际上是动态的@o@，所以就对比一下^-^）

    2345截图20180908152502.png2345截图20180908152512.png

    css3文字颜色渐变的方法二：通过mask-image属性实现文字颜色渐变的静态效果

    <h2class="text-gradient"data-text="文字颜色渐变">文字颜色渐变</h2>

    .text-gradient{

    display:inline-block;

    font-family:'微软雅黑';

    font-size:5em;

    position:relative;

    }

    .text-gradient[data-text]::after{

    content:attr(data-text);

    color:green;

    position:absolute;

    left:0;

    z-index:2;

    -webkit-mask-image:-webkit-gradient(linear,00,0bottom,from(#ff0000),to(rgba(0,0,255,0)));

    }