css3背景色渐变的动画实例应用

最近在给客户仿一个QQ安全中心的页面，在底部发现了一个css3动画，如下图，这个动画成功引起了我的兴趣，本文就是分享它是如何实现的。

来仔细分析一下这个动画的特点：

1.初始状态下背景色渐变部分占整个容器高度的大约30%；

2.悬停的刹那间背景色变为白色，而不是悬停动画直接覆盖初始状态；

3.悬停后背景色渐变部分大概占整个容器高度的大约60%，这个我用取色器测过，且颜色最深的部分从最底下开始。

分析动画特点的目的在于确定html结构，html代码如下：

<section> 
  <div class="one"></div> 
  <div class="two"></div> 
  <div class="three"></div> 
</section>

其中section负责任何时候都存在的左、右、下边框，class="one"为初始状态下的盒子，class="two"为悬停后的盒子，之所以这样是因为上面分析的第二个特点，class="three"为文字所在的盒子，因为class="two"有一个高度变化的动画，而样例动画上的文字位置始终不变而且也不存在在同一位置时会出现某一刻被隐藏的现象，文字所在的盒子要把背景设置为透明。

要实现背景色渐变，必须了解linear-gradient，即线性渐变，线性渐变有向下、向上、向左、向右和对角五个方向，有线性渐变就有径向渐变，更多具体的大家可以去看菜鸟教程，此处多说无意义。

css代码如下，我做了注释：

section { 
    width: 300px; 
    height: 200px; 
    margin: auto; 
    position: relative; 
    border: solid 1px #F1F1F1; 
    border-top: none;/*整个动画一直存在的左右下边框*/ 
} 
section div { 
    position: absolute; 
    left: 0; 
    bottom: 0;/*动画从下往上执行，所以是bottom*/ 
} 
.one { 
    width: 100%; 
    height: 100%; 
    background: -moz-linear-gradient(#F2F2F2 0%, #ffffff 30%); 
    background: -o-linear-gradient(#F2F2F2 0%, #ffffff 30%); 
    background: -webkit-linear-gradient(#F2F2F2 0%, #ffffff 30%); 
    background: linear-gradient(#F2F2F2 0%, #ffffff 30%);/*默认方向是从上往下，括号里不用声明方向，如果是其它方向则需要在括号里面声明，比如从左到右标准语法是to right。*/ 
} 
section:hover .one { 
    display: none;/*悬停时隐藏初始状态实现背景色白色，而不是被悬停动画直接覆盖，那样的话会出现背景色重叠现象*/ 
} 
section:hover .two { 
    width: 100%; 
    border-top: solid 1px #EFEFEF; 
    background: -moz-linear-gradient(#E7E7E5 0%, #ffffff 60%); 
    background: -o-linear-gradient(#E7E7E5 0%, #ffffff 60%); 
    background: -webkit-linear-gradient(#E7E7E5 0%, #ffffff 60%); 
    background: linear-gradient(#E7E7E5 0%, #ffffff 60%); 
    animation: two 1s;/*动画完成所需时间*/ 
    -webkit-animation: two 1s; 
    animation-fill-mode: forwards;/*动画执行完停留在最后一针*/ 
    -webkit-animation-fill-mode: forwards; 
} 
@keyframes two { 
 0% { 
 height: 0; 
} 
 100% { 
 height: 100%; 
} 
} 
@-webkit-keyframes two { 
 0% { 
 height: 0; 
} 
 100% { 
 height: 100%; 
} 
} 

点此测试代码。

需要注意两个地方：

1.其它渐变方向必须在括号里声明，以从左到右为例，Opera和Firefox都是都是right，Safari则是left，具体去菜鸟教程查。

2.@keyframes的兼容w3school里-moz-、-o-和-webkit-都有，菜鸟教程里只有-webkit-，根据我的使用写个-webkit-兼容就够了，有的人说管它什么全写，全写是省事，但是我们要注意代码的严谨和专业，全写在Dreamweaver会报错，在大公司里也会挨批，所以如果不记得兼容就百度，经常用就记得哪个需要写哪些兼容了。

我的时间有限，可能我写的不是最精简的，有更好的写法的可以加群与我交流。

有的人觉得css很简单，觉得自己会的足以写任何页面了，但是从前天和今天的文章看很多效果的实现需要的都是不常用的，而这些不常用的到需要的时候就犯难了，所以学技术不可多而不精，要专而精，但是前端发展太快，百花齐放，各种框架、库，一找工作还都是企业刚需，这就是矛盾所在，所以很多前端觉得自己很苦逼，那是因为心太急和迷茫的原因，技术得慢慢学，薪水也是慢慢提高的，学什么得分清主次，就像前端三大框架，vue搞精其它两个了解下就行了，如果有企业要求其它两个中的一个是刚需那这企业可以不选，这种企业也是少数，不用为自己不精而烦恼。