欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  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)));
 
  }
 
  效果如下:
 
  2345截图20180908152748.png
 
  从CSS代码可以看出,效果的实现除了“content内容生成技术”以外,主要是使用了mask-image属性。
 
  css3文字颜色渐变的方法三:通过background-clip+text-fill-color属性来实现文字颜色渐变的静态效果。
 
  <h2class="text-gradient">文字颜色渐变效果</h2>
 
  .text-gradient{
 
  display:inline-block;
 
  color:green;
 
  font-size:5em;
 
  font-family:'微软雅黑';
 
  background-image:-webkit-gradient(linear,00,0bottom,from(rgba(0,128,0,1)),to(rgba(51,51,51,1)));
 
  -webkit-background-clip:text;
 
  -webkit-text-fill-color:transparent;
 
  };
 
  这个方法虽然使用的CSS属性相对多些,但是结构简单,易于控制,颜色的选取与控制也更精确,理解上也更容易理解。









本文转载自中文网


 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c55441.shtml