css3文字颜色动态渐变

Cciradih 发布于2019-08-29 13:56 / 1347人阅读

摘要：是因为动画的结束后的最后一帧的颜色为，立马会重新执行动画，颜色会初始到第一帧，所以会有明显的变化。的效果就是背景颜色被剪裁到文字上面，只有文字会显示背景颜色。用数字表达结合以上三个属性结合动画，最终实现文字渐变的效果。

浏览 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;
    }
    50% {
        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里面歌词视图的效果。具体效果参考犀利的background-clip:text，实现K歌字幕效果

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

总结

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

GPU云服务器云服务器渐变颜色 ps颜色渐变 js颜色渐变 java程序颜色渐变

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112807.html

css3整理

W3C的CSS3规范仍在开发，但是，许多新的CSS3属性已在现代浏览器使用 CSS3边框 border-radius border-top-left-radius: 2em 0.5em box-shadow:x-shadow y-shadow blur spread(阴影尺寸，可选) color inset(outset外部阴影，可选) border-image border-im...

X1nFLY 2019-08-29 11:19 评论0 收藏0
css3重要语法汇总

摘要：属性指定了列与列间的边框样式属性指定了两列的边框厚度属性指定了两列的边框颜色属性是所有属性的简写。属性指定了列的宽度。多媒体查询代码除那些设备特定的媒体类型代码线性渐变 linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet)linear-gradient(指定渐变方向, 颜色的起点，颜色的结束) 文本...

zhiwei 2019-08-29 15:09 评论0 收藏0
css3

css3新增选择器属性选择器包括h5中新增的自定义属性 p[data-id]{color: red} sasas 属性选择器可以指定属性值的样式变化 E[attr=value] 指定属性名 p[data-id=111]{color: red} sasas1 sasas2 sasas3 只有第一行才会...

RancherLabs 2019-08-29 13:28 评论0 收藏0
CSS3主要内容

摘要：必须要准确的放置否则声明无效。倒影设置元素的倒影准确的来说不能算是的东西，但需要知道。默认值不可继承背景渐变渐变是在中新增加的图片类型使用渐变可以在两种颜色间制造出平滑的渐变效果用它代替图片，可以加快页面的载入时间减小带宽占用。 CSS3主要内容一、CSS选择器 CSS3选择器规范地址： https://www.w3.org/TR/2011/RE... ...

X_AirDu 2019-08-30 11:15 评论0 收藏0