cvmachine.com - 申博开户网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:CSS3的颜色渐变效果的示例代码分析

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

2017-11-14 11:38:54 来源:www.cvmachine.com 【

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

在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的颜色渐变效果的示例代码分析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持申博开户。


本文地址:http://www.cvmachine.com/a/question/93773.html
Tags: css3 渐变 颜色
编辑:申博开户网
188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes 真钱的棋牌游戏 casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 nba英文官网 嘉年华官网 皇冠备用 火箭队官网 中国人论坛 bet 单双公式 博彩资讯网 w88优德 港京印刷图库 澳门足球盘 球盘 娱乐场 联众网站 沙龙365 7080棋牌游戏 真钱 澳门回归日期 大众娱乐网 卡宾官方旗舰店 mg电子 全亚洲首选288x nba即时比分 本港 中国足彩竞猜网 斗地主规则 七星彩论坛图规 网上赌博 单双规律 沈泳 华夏娱乐网 明升备用网址 梦网书城 盈禾国际 明升体育 博狗沃鑫 卡宾官方旗舰 信誉赌场 球探比分网 竞彩论坛空间 三亚娱乐 soutec 北京福利彩票 澳门彩票公司 北京pk10 凤凰 纸牌小游戏 皇冠现金代理 银河国际亚洲首选288x 三六八高手论坛 空中城市 赌球心得 188比分 让球规则 三星娱乐城 诺贝尔娱乐城 今天有nba直播吗 5060全讯网 新世纪 久乐娱乐场 世界杯盘口 易胜博 麻将单机版 华人娱乐总站 财神爷心水论坛 巴特 澳门百利宫 明升 红姐统一主图库 九龙老牌图库 打牌 娱乐王子 娱乐真人 亚豪平台 真人娱乐 飞禽走兽老虎机 188bet下载 博发娱乐城 北单 陈怀生 比分188 百万图库 老挝赌博 pc蛋蛋注册 天上人间娱乐 红姐统一图库 产业新闻网 葡京
m88.com | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部