在 animate.css 寻找自己想要的动态效果，看到标题Ani MATE .css和按钮Animate IT 的颜色在逐渐变化， 觉得 蛮有趣的，把控制变化的相关代码扒了下来，自己分析实现一波。
一 开始 认为使用了js控制颜色逐渐变化，看了看js文件，除了 jq uery，就只有一小段用来DOM操作添加更改class的代码。控制颜色变化不可能在这里。联想到animate库只用css来控制动画效果，那多 半 在css文件里。
变化的两个部分HT ML 和CSS分别如下
< h1 class="site__title mega">Animate.css</h1>
.site__title {
color: # f35626;
background -i mage: - webkit -linear-gra die nt(92 deg ,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit -t ext-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
<button class="butt js--triggerAnimation">Animate it</button>
.butt {
border: 2px solid #f35626;
line-h ei ght: 1.375;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-weight : 700;
color: #f35626;
cursor: pointer;
-webkit-animation: hue 60s infinite linear;
}
以及一段很 重要 的代码
@-webkit-keyfr am es hue {
From {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(- 360 deg);
}
}
重点部分就在于 -webkit-animation ，实际上animate库基本都是用的这种方式实现各种动画的。
-webkit-animation: hue 60s infinite linear;
这里定义了一个名为hue的动画名，第二个参数设置动画持续时间为60s，第三个指定动画播放次数无限次，第四个设置速度变化（从头到尾速度相同）。
CSS动画也是采用的关键帧的方法，下面的那一段就是在定义头尾的关键帧，让这个动画真正的动起来！
f rom {
.. .
}
to {
...
}
就是说从开头(0%)到结尾(100%)分别 是什么 状态！再结合 -webkit-animation 第四个参数的速度变化，让他更合理的动起来！
-webkit-filter我也不 知道 什么 意思 ，查查W3C怎么讲的吧。
filter 属性定义了元素(通常是 < img > )的可视效果(例如：模糊与饱和度)。
用来 调整 可视效果？不明觉厉。再看看属性hue-rotate()是什么意思：
给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
色相旋转？？懂了好像又没懂？作为前端工程师，基本的色彩原理还是要知道的：
这就是色相环，这里是24种代表颜色，实际在屏幕上可以显示的RGB颜色有16万种。就是说，上面的颜色变化，在一分钟内有16万种变化&helli p; …
上面可以很明显的知道这是一个 圆环 ，hue-rotate()就定义了当前颜色在这个 圆 环上的偏转角度。
颜色变化大概就是这么多了，现在自己实现一下吧：
<!DOCTY PE html>
<html>
<head>
< ;m eta charset="UTF-8">
<title>Document</title>
<style>
.title{
color: #48c0c0;
-webkit-animation: hue 5s infinite linear;
}
@keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<h1 class="title">颜色渐变动画</h1>
</body>
</html>
最终的效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 CSS3的颜色渐变效果的示例代码 全部内容，希望文章能够帮你解决 CSS3的颜色渐变效果的示例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS3的颜色渐变效果的示例代码的详细内容...