CSS3的颜色渐变效果
在 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>
最终的效果：
CSS3的颜色渐变效果的更多相关文章
- CSS3背景颜色渐变效果
1.firefox浏览器: background-image: -moz-linear-gradient(top , #eef9fe, #d1ecff); 2.safari.chrome浏览器: ba ...
- css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+
css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...
- CSS3 新增颜色表示方式
一.CSS1&2颜色表示方式(W3C标准) 1.Color name 颜色名称方式(用颜色关键字表示对应的颜色.) 例如:red(红色).blue(蓝色).pink(粉色) 优点:方便快捷而 ...
- css3中的渐变效果
大家好,这里是demo软件园,今天为大家分享的是css3中的渐变效果. css3中的渐变需要注意的是渐变的是图片而不是颜色,而渐变又分为两种:线性渐变与径向渐变,今天我们重点介绍的是线性渐变. 1.线 ...
- Java实现颜色渐变效果
RGB色彩,在自然界中肉眼所能看到的任何色彩都可以由红(R).绿(G).蓝(B)这三种色彩混合叠加而成,因此我们只要递增递减的修改其特定值就能得到相应的渐变效果. 运行效果:(图1) 运行5秒后:(图 ...
- Android开发---如何操作资源目录中的资源文件3--圆角边框、背景颜色渐变效果、边框颜色
Android开发---如何操作资源目录中的资源文件3 效果图 1.圆角边框 2.背景颜色渐变效果 1.activity_main.xml 描述: 定义了一个shape资源管理按钮 <?xml ...
- css3的线性渐变效果
1.代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- CSS3中颜色线性渐变实战
css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .te ...
- css3背景颜色渐变属性
https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...
随机推荐
- Java 的概述
Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是有SunMicrosystems公司于1995年5月推出的Java程序设计语言和Java平台(即JavaSE,JavaEE,JavaME ...
- Eclipse无法打开项目中的任何文件
今天,Eclipse居然打不开项目的任何一个文件,网上也没搜到,我决定重置下视图试试: Windows-Reset Persective-然后能正常打开项目的文件了,解决问题!
- JDK安装与配置详细图文教程
目的:本人健忘,以后难免会重装系统啥的,软件卸了装是常有的事,特此写此详细教程,一是方便自己以后重装的时候可以看看:二是如果有某位初学者有幸光临,也可以给一点参照.下面我会从JDK的下载.安装.环境变 ...
- MongoDb 入门教程
MongoDb 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. 它是可扩展的高性能数据存储解决方案,经常被用于非关系型数据的存储,能存储海量的数据. 常 ...
- POI 自用API
poi包下载 API 使用POI生成Excel,大家都是赞个.可是狐狸觉得毕竟不是微软的产品,使用没有C#语言的好用,方法还是存在极限的. 下面总结狐狸自己用过的方法: import org.apac ...
- Linux平台 Oracle 12cR2 RAC安装Part1：准备工作
Linux平台 Oracle 12cR2 RAC安装Part1:准备工作 一.实施前期准备工作 1.1 服务器安装操作系统 1.2 Oracle安装介质 1.3 共享存储规划 1.4 网络规范分配 二 ...
- cocos quick lua 输入框点击穿透的问题处理方案。
条件:当前版本quick-3.3 -lua,系统 win7. 问题:在输入框(textField或者editbox,下文"输入框"就代表这两种)打开的情况下弹出其他界面盖住输入框, ...
- Maven01——简介、安装配置、入门程序、项目构建和依赖管理
1 Maven的简介 1.1 什么是maven 是apache下的一个开源项目,是纯java开发,并且只是用来管理java项目的 Svn eclipse maven量级 1.2 Maven好处 同 ...
- 媒体查询media参数以及其兼容性问题
一.设置meta标签 在使用媒体查询media之前我们需要先设置meta标签,对设备的缩放等参数进行设定. <!--设置缩放和绘制--> <meta name="viewp ...
- asp.net MVC下使用rest
前言 最近做了下个MVC的项目,需要用到rest接口,与java写的应用程序通信,包括数据的接收和发送,那么我将用实用的角度来全面的讲解一下它的使用方法 一.创建rest服务 首先创建一个Asp.Ne ...