使用CSS3制作文本的颜色渐变动画效果

发布时间：2023-11-03 14:31:00 所属栏目：语言来源：

导读：　　在animate.css寻找自己想要的动态效果，看到标题Animate.css和按钮Animate it的颜色在逐渐变化，觉得蛮有趣的，把控制变化的相关代码扒了下来，自己分析实现一波。

　　一开始认为使用了js控制颜色逐渐变化，

　　在animate.css寻找自己想要的动态效果，看到标题Animate.css和按钮Animate it的颜色在逐渐变化，觉得蛮有趣的，把控制变化的相关代码扒了下来，自己分析实现一波。

　　一开始认为使用了js控制颜色逐渐变化，看了看js文件，除了jQuery，就只有一小段用来DOM操作添加更改class的代码。控制颜色变化不可能在这里。联想到animate库只用css来控制动画效果，那多半在css文件里。

　　变化的两个部分HTML和CSS分别如下

　　<h1 class="site__title mega">Animate.css</h1>

　　.site__title {

　　    color: #f35626;

　　    background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);

　　    -webkit-background-clip: text;

　　    -webkit-text-fill-color: transparent;

　　    -webkit-animation: hue 60s infinite linear;

　　}

　　<button class="butt js--triggerAnimation">Animate it</button>

　　.butt {

　　    border: 2px solid #f35626;

　　    line-height: 1.375;

　　    padding-left: 1.5rem;

　　    padding-right: 1.5rem;

　　    font-weight: 700;

　　    color: #f35626;

　　    cursor: pointer;

　　    -webkit-animation: hue 60s infinite linear;

　　}

　　以及一段很重要的代码

　　@-webkit-keyframes hue {

　　 from {

　　    -webkit-filter: hue-rotate(0deg);

　　 }

　　 to {

　　    -webkit-filter: hue-rotate(-360deg);

　　 }

　　}

　　重点部分就在于-webkit-animation，实际上animate库基本都是用的这种方式实现各种动画的。

　　-webkit-animation: hue 60s infinite linear;

　　这里定义了一个名为hue的动画名，第二个参数设置动画持续时间为60s，第三个指定动画播放次数无限次，第四个设置速度变化（从头到尾速度相同）。

　　CSS动画也是采用的关键帧的方法，下面的那一段就是在定义头尾的关键帧，让这个动画真正的动起来！

　　from {

　　    ...

　　}

　　to {

　　    ...

　　}

　　就是说从开头(0%)到结尾(100%)分别是什么状态！再结合-webkit-animation第四个参数的速度变化，让他更合理的动起来！

　　-webkit-filter我也不知道什么意思，查查W3C怎么讲的吧。

　　filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

　　用来调整可视效果？不明觉厉。再看看属性hue-rotate()是什么意思：

　　给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

　　色相旋转？？懂了好像又没懂？作为前端工程师，基本的色彩原理还是要知道的：

　　这就是色相环，这里是24种代表颜色，实际在屏幕上可以显示的RGB颜色有16万种。就是说，上面的颜色变化，在一分钟内有16万种变化……

　　上面可以很明显的知道这是一个圆环，hue-rotate()就定义了当前颜色在这个圆环上的偏转角度。

　　颜色变化大概就是这么多了，现在自己实现一下吧：

　　<!DOCTYPE html>

　　<html>

　　<head>

　　    <meta 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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!