css3文字颜色动态渐变

浏览 Animate.css官网 的时候发现Animate.css这几个字母和按钮的颜色会慢慢变化,看着挺喜欢的,F12查看了它的实现方法。

Animate.css

青于蓝尔胜于蓝,Hello、我是渐变演示

Animate.css写法

h3{
    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);
    }
}

属性解释:

  • background-clip
  • text-fill-color
  • filter: hue-rotate

background-clip

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

text-fill-color

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

filter: hue-rotate

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

扩展-透明度渐变

.maskImage {
  color: red;
  height: 600px;
  //background: black;
  -webkit-mask-image: -webkit-gradient(linear,center top,center bottom,color-stop(0,transparent),color-stop(.3,#000),color-stop(1,#000));
  }

参考网址: https://segmentfault.com/a/1190000012232342?utm_source=tag-newest
Animate.css: https://daneden.github.io/animate.css/

留下一个答复

请输入你的评论!
请在这里输入你的名字

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据