电话
13363039260
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)));
}
猜你喜欢
联络方式：
13363039260
微信二维码 