CSS3的颜色渐变效果的示例代码


Posted in HTML / CSS onSeptember 29, 2017

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

CSS3的颜色渐变效果的示例代码
CSS3的颜色渐变效果的示例代码

一开始认为使用了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的值相当于又绕一圈。

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

CSS3的颜色渐变效果的示例代码

这就是色相环,这里是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>

最终的效果:

CSS3的颜色渐变效果的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 #HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 #HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 #HTML / CSS
css3 pointer-events 介绍详解
Sep 18 #HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 #HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 #HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 #HTML / CSS
You might like
php加密解密实用类分享
2014/01/07 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
angular5 httpclient的示例实战
2018/03/12 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
Python如何输出整数
2020/06/07 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
加拿大最大的书店:Indigo
2017/01/01 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
电气工程自动化求职信
2014/03/14 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
收费员岗位职责
2015/02/14 职场文书
休假证明书
2015/06/24 职场文书
升学宴家长答谢词
2015/09/29 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
导游词之凤凰古城
2019/10/22 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
Kubernetes控制节点的部署
2022/04/01 Servers