:【小技巧】CSS3文字颜色动态渐变-经验观点免费ppt模版下载-道格办公
投稿
  1. JustNews首页
  2. 经验观点
  3. 【小技巧】CSS3文字颜色动态渐变

【小技巧】CSS3文字颜色动态渐变

作者: 道格办公 • • 经验观点 • 浏览量 865

r属性来实现的，结果发现它是利用CSS3的动画特性来实现的。下面是一个简单的示例代码，可以实现文字颜色的动态渐变效果： HTML: ```html

Animate.css
``` CSS: ```css .color-change { font-size: 40px; animation: colorAnim 5s infinite; } @keyframes colorAnim { 0% { color: red; } 50% { color: blue; } 100% { color: green; } } ``` 在上面的代码中，我们创建了一个`color-change`的`div`元素，并为其添加了`colorAnim`动画。该动画会在5秒钟内无限循环播放。在`@keyframes`规则中，我们定义了三个关键帧，分别代表动画的起始、中间和结束状态。通过在不同的关键帧中定义不同的颜色，文字颜色就会在动画播放过程中逐渐过渡。 你可以根据需求调整动画的时长和颜色。这个技巧可以用于任何文本元素，让文字更加生动有趣。尝试一下吧！

浏览 Animate.css官网 的时候发现Animate.css这几个字母的颜色会慢慢变化，个人觉得还是很有意思，本以为是利用animate 改变color,结果F12后发现好多奇怪的css属性。

先来看看我的实现方法

简易实现方法

h2{    
    height: 60px;    
    color: #f35626;    
    -webkit-animation: hue 6s infinite linear;
}
@-webkit-keyframes hue {    
    from {        
        color: #f35626;
    }    
        to {        
        color: #feab3a;
    }
}

通过通过css3的动画属性可以轻松改变文字的颜色，但是这里有一个小问题，就是动画执行一个轮回结束后，颜色有一个明显变化过程。是因为动画的结束后的最后一帧的颜色为#feab3a，立马会重新执行动画，颜色会初始到第一帧#f35626，所以会有明显的变化。我们稍微改变一下动画的写法。

@-webkit-keyframes hue {
    0%{        
            color: #f35626;
    }    
      to {        
            color: #feab3a;
    }
    100%{        
            color: #f35626;
    }
}

这样开始和结束都是同样的颜色，动画轮回颜色就不会突变了。

Animate.css写法

先看看Animate的写法

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: hue 6s infinite linear;
}
@-webkit-keyframes hue {    
    from {        
    -webkit-filter: hue-rotate(0deg);
    }    
    to {        
    -webkit-filter: hue-rotate(-360deg);
    }
}

预览效果


linear-gradient线性渐变，以前是用到过，但是background-clip, text-fill-color, -webkit-filter: hue-rotate,这些属性感觉好陌生，查阅相关资料后才进一步认识这些属性，下面一步步来了解这些属性吧。

  • background-clip

  • text-fill-color

  • filter: hue-rotate

background-clip

CSS3 属性 规定背景的绘制区域 W3school上面只展示了三个值 CSS3 background-clip 属性

border-box       
# 背景被裁剪到边框盒。padding-box       
# 背景被裁剪到内边距框。content-box       
# 背景被裁剪到内容框。

上面用到的-webkit-background-clip: text; 必须加上-webkit-前缀，不然浏览器不能正常渲染。text的效果就是背景颜色被剪裁到文字上面，只有文字会显示背景颜色。这个属性可以做类似ktv里面歌词视图的效果。

text-fill-color

text-fill-color,表示文字颜色填充，实现的效果基本上与color一样，会覆盖color所定义的字体颜色.也支持一个transparent属性，也就是透明填充。

filter: hue-rotate

hue-rotate用来设置对象的色相旋转。用0-360数字表达

结合以上三个属性结合动画，最终实现文字渐变的效果。

总结

随着对CSS3越发的了解，深深的感受到CSS3的潜力越来越大，配合css3能够轻松实现各种酷炫效果。当然浏览器兼容是个大问题。

文章来源：https://segmentfault.com/a/1190000012232342

想做网站又很懒？50套国外H5流行模板免费送
点我获取

戳“阅读原文”入群免费领取前端开发教程！

文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/fr/articles/detail/Tips%20CSS3%20Text%20Color%20Dynamic%20Gradient.html

赞 (810)
打赏 支付宝扫一扫 支付宝扫一扫
Lomu 和巽汇 专栏作者
48 196
single-end

相关推荐