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 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
日期和时间问题
2015/01/04 面试题
单位门卫岗位职责
2013/12/20 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
PyTorch中的torch.cat简单介绍
2022/03/17 Python