css颜色渐变实例:css3文字颜色渐变的实现方法

2024-01-17 13:53 小编
    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)));
    }


Tag: 方法
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码