css颜色渐变实例：css3文字颜色渐变的实现方法
导读：css3文字颜色渐变的实现方法有很多，下面我就在这里为大家介绍 css3文字颜色渐变的方法一：通过css3的动画属性实现css文字动态颜色渐变 文字颜色渐变 h2{ height:60px; color:#f35626;...
css3文字颜色渐变的实现方法有很多，下面我就在这里为大家介绍
css3文字颜色渐变的方法一：通过css3的动画属性实现css文字动态颜色渐变
文字颜色渐变
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属性实现文字颜色渐变的静态效果 文字颜色渐变 .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))); }声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css颜色渐变实例：css3文字颜色渐变的实现方法
本文地址： https://pptw.com/jishu/664486.html