第97天：CSS3渐变和过渡详解

一、渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

可分为线性渐变、径向渐变

1、线性渐变（gradient 变化）

　　linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

    linear-gradient:方向，起始颜色，终止颜色
  方向：to left/ to right / to top

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>渐变</title>

     <style>

         div{

             width: 1000px;

             height: 100px;

             margin: 30px auto;

             border:1px solid #000;

         }

         /*linear-gradient:方向 起始颜色 终止颜色*/

         /*方向：to left to right  to top*/

         div:nth-child(1){

             background-image: linear-gradient(to right,yellow,green);

         }

         /*不写方向，默认从上到下*/

         div:nth-child(2){

             background-image: linear-gradient(yellow,green);

         }

         /*方向可以写角度 deg*/

         div:nth-child(3){

             width: 100px;

             height: 100px;

             background-image: linear-gradient(45deg,yellow,green);

         }

         /*用百分比控制渐变的范围*/

         div:nth-child(4){

             background-image: linear-gradient(to right,yellow 0%,red 40%,blue 100%);

         }

         /*颜色突变*/

         div:nth-child(5){

             background-image: linear-gradient(45deg,yellow 0%,yellow 25%,blue 25%,blue 50%,red 50%,red 75%,green 75%,green 100%);

         }

         div:nth-child(6){

             background-image: linear-gradient(135deg,

             #000 0%,

             #000 25%,

             #fff 25%,

             #fff 50%,

             #000 50%,

             #000 75%,

             #fff 75%,

             #fff 100%);

             background-repeat: repeat;

             background-size: 100px 100%;

         }

     </style>

 </head>

 <body>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

 </body>

 </html>

运行效果：

2、径向渐变

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

　　1、必要的元素：

　　　　a、辐射范围即圆半径 (半径越大，渐变效果越大)

　　　　b、中心点 即圆的中心 (中心点的位置是以盒子自身)

　　　　c、渐变起始色

　　　　d、渐变终止色

　　2、关于中心点：中心位置参照的是盒子的左上角

　　3、关于辐射范围：其半径可以不等，即可以是椭圆

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>径向渐变</title>

     <style>

         div{

             width: 200px;

             height: 200px;

             border:1px solid #000;

             margin: 20px 20px;

             float: left;

         }

         /* 径向渐变：

         radial-gradient(辐射半径，中心的位置，起始颜色，终止颜色)

         中心点位置：at left right center bottom top*/

         div:nth-child(1){

             background-image: radial-gradient(at left top,red,blue);

         }

         div:nth-child(2){

             background-image: radial-gradient(at 50px 50px,red,blue);

         }

         /* 在at前可加辐射半径*/

         div:nth-child(3){

             background-image: radial-gradient(100px at 50px 50px,red,blue);

         }

         /*多个颜色渐变*/

         div:nth-child(4){

             background-image: radial-gradient(at 50px 50px,red 10%,blue 60%,yellow 75%);

         }

         /*椭圆渐变*/

         div:nth-child(5){

             background-image: radial-gradient(at 50px 100px,red 10%,blue 60%,yellow 75%);

         }

         /*球体 用rgba控制透明度，实现立体效果*/

         div:nth-child(6){

             border-radius: 50%;

             border: 0;

             background-color: blue;

             background-image: radial-gradient(at 80px 80px,rgba(0,0,0,0),rgba(0,0,0,0.6) );

         }

     </style>

 </head>

 <body>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

 </body>

 </html>
运行效果：

二、过渡(transition)

　　1、Transition:param1 param2

　　param1 要过渡的属性

　　param2 过渡的时间.

　　过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

　　补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态

　　帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

　　特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。

 .box{

             width: 200px;

             height: 200px;

             border:1px solid #000;

             margin: 100px auto;

             background-color: red;

             /*transition: width 2s,background-color 2s;*/

             /*如果多个过渡的特效相同，可以简写，过渡必须加给盒子本身*/

             /*transition:过渡属性,过渡时间,速度曲线(linear匀速),延迟时间*/

             transition: all 2s linear 1s;

         }

         /*过渡属性*/

         .box:hover{

             width: 600px;

             background-color: blue;

         }

2、过渡属性

　　transition-property设置过渡属性
　　transition-duration设置过渡时间用来控制速度linear(匀速)
　　ease(减速) / ease-in(加速) / ease-out(减速) / ease-in-out(先加速后减速)
　　transition-timing-function设置过渡速度
　　transition-delay设置过渡延时 超过时间后执行动画.

如果所有属性都过渡，可以使用transition-property:all;

  .box{

             width: 200px;

             height: 200px;

             background-color: red;

             margin: 100px auto;

             /*过度属性详解*/

             transition-property: width;/*过度属性*/

             transition-duration: 2s;/*过渡持续时间*/

             transition-timing-function: linear;/*运动曲线 linear 线性*/

            /* transition-timing-function: ease(减速)/ease-in(加速)/ease-out(减速)/ease-in-out(先加速后减速);*/

             /*过渡延迟*/

             transition-delay: 1s;

             /*如果所有属性都过渡，可以使用transition-property:all;*/

         }

         .box:hover{

             width: 600px;

         }