过渡动画 css3渐变

 1.    过渡动画:是从一个状态渐渐过渡到另一个状态   可以使我们的页面边得更加的好看,动感十足,低版本浏览器不支持这个属性 不影响页面布局  
      经常和hover 一起搭配使用

      /* 如果需要多个属性利用逗号隔开 */
        /* 过度属性 花费的时间 何时开始 */
       /* transition: width 1s 1s,height 1s 1s; */
       总写法: transition:all 1s;
 2.css3渐变
  线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向        (linear-gradient 线性渐变)
  径向渐变（Radial Gradients）- 由它们的中心定义
      url('URL')    图像的URL
    none    无图像背景会显示。这是默认
    linear-gradient()    创建一个线0性渐变的 "图像"(从上到下)
    radial-gradient()    用径向渐变创建 "图像"。 (center to edges)
    repeating-linear-gradient()    创建重复的线性渐变 "图像"。
    repeating-radial-gradient()    创建重复的径向渐变 "图像"
    inherit    指定背景图像应该从父元素继承
  语法:
      background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
      背景图像:线性渐变(方向，颜色停止1，颜色停止2，...);
   案例:
    线性渐变 - 从上到下
    顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色： up 向上 downwards 向下
    background-image: linear-gradient(#e66465, #9198e5);

    线性渐变 - 从左到右
     从左边开始的线性渐变。起点是红色，慢慢过渡到黄色   (to right 向右  to left 向左)
      background-image: linear-gradient(to right, red , yellow);
 
    线性渐变 - 对角
    从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色
    background-image: linear-gradient(to bottom right, red, yellow);

    使用角度:如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向
    （to bottom、to top、to right、to left、to bottom right，等等）。

    background-image: linear-gradient(angle, color-stop1, color-stop2);

    带有指定的角度的线性渐变： background-image: linear-gradient(-90deg, red, yellow);
    带有多个颜色节点的从上到下的线性渐变： background-image: linear-gradient(red, yellow, green);
    创建一个带有彩虹颜色和文本的线性渐变：  标准的语法
    background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

  3.  使用透明度（transparent） 从左到右的线性渐变，带有透明度：
     background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

     重复的线性渐变 repeating 重复出现
     repeating-linear-gradient() 函数用于重复线性渐变：
     background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

     CSS3 径向渐变
     径向渐变由它的中心定义。
    为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。
        默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
    语法:background-image: radial-gradient(shape size at position, start-color, ..., last-color);
      1.径向渐变 - 颜色节点均匀分布（默认情况下）
      background-image: radial-gradient(red, yellow, green);
      2.径向渐变 - 颜色节点不均匀分布
       background-image: radial-gradient(red 5%, yellow 15%, green 60%);
      3.设置形状
       shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
        background-image: radial-gradient(circle, red, yellow, green);  圆形渐变

   4. 不同尺寸大小关键字的使用
    size 参数定义了渐变的大小。它可以是以下四个值：
      closest-side  最近侧 最近端
      farthest-side  最远端
      closest-corner  最近角
      farthest-corner 最远角

      带有不同尺寸大小关键字的径向渐变：
       background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
       background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);

       重复的径向渐变
      repeating-radial-gradient() 函数用于重复径向渐变：
      background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

      举例说明:
      background: linear-gradient(red 10%, green 85%, blue 90%)
      其中：
        10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
        85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
        90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。
        10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。
        比如这句：
        background: linear-gradient(red 0%, green 50%, blue 50%) 和 background: linear-gradient(red 0%, green 50%, blue 10%)