12、CSS3渐变、过渡及2D转换

一、背景图的多组值应用

格式：background:背景图1,背景图2,...,背景色;
特点：元素可以同时设置多个背景图，按照书写顺序，先写的在上层，后写的在下层，背景色必须放在最后

二、自定义字体

定义字体
    @font-face{
      font-family:"自己起的名字" ;
      src : url( .......); url里边写文字资源路径;}
      使用字体.XXx{
      font-family: '你起的名字';
    }
使用字体
      .xxx{
        font-family:'你起的名字';
      }

三、阿里矢量图标库

1、挑选你要的图标
2、添加到项目
3、下载到本地
4、引入本地资源
5、link到你的页面中
6、使用<p class='iconfont icon-xxx'></p> iconfont规定你使用图标样式，后边的那个就是具体使用哪个图标 

四、CSS3渐变

概念

  CSS3渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡

1、线性渐变 linear-gradient

  线性渐变是从“一个方向”向“另一个方向”的颜色渐变
    语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);
    特点：
      1）渐变本质上属于背景图，浏览器将我们的代码解析成了图片，来显示渐变效果
      2）默认按照颜色书写顺序，从上到下渐变，颜色可以写多个，但是至少2个
      3）渐变方向（第一个参数）
        *朝着某个方向渐变   
        background:linear-gradient(to right,red,blue);
        朝着某个角落渐变  
        background: linear-gradient(to right bottom,red,blue);
        按照某个角度渐变  
        background: linear-gradient(10deg,red,blue);
      4)非规律性渐变
        background: linear-gradient(180deg,red 0%,blue 30%,yellow 40%);
        在颜色后边百分比，作为颜色出现的位置（注意百分比和颜色之间需要空格隔开)
      5)重复渐变
        background: repeating-linear-gradient(180deg,red 0%,blue 10%,yellow 20%);

2、径向渐变 radial-gradient

    语法： background: radial-gradient(center, shape, size,           start-color, ..., last-color);
    注意：一般我们不去修改前三个参数，如果修改，我们需要添加浏览器前缀
    参数：
      1）center：渐变起点的位置
          可以为百分比，渐变起点默认为中心点（50% 50%），我们可以在第一个参数位置修改渐变起点,左上角为0 0。
          ——像素数值
          ——百分比
      2）shape：渐变的形状
          ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
      3）size：渐变的大小，即渐变到哪里停止，它有四个值。 
          closest-side：最近边
          farthest-side：最远边
          closest-corner：最近角
          farthest-corner：最远角
        注意：渐变点起始点默认在中心点，这个时候，最近边和最远边效果一致，最近角和最远角效果一致。
             渐变形状和渐变大小不能同时使用。
      4）渐变颜色
  *非规律径向渐变     
      background: radial-gradient(red 0%,yellow 20%,blue 70%);
  *重复径向渐变       
      background: repeating-radial-gradient(red 0%,yellow 10%,blue 20%);

五、浏览器兼容

一些CSS属性还没有正式发布，很多浏览器已经提供支持。这个时候写法可能存在差距，或者有一些浏览器为了拓展某方面的功能，创建了一些css正式版本中没有的css，这个时候我们需要添加浏览器前缀来对这些css提供支持
      -o-         欧朋（Opera）
      -webkit     Chrome、Safari
      -ms-        IE
      -moz-       Firefox
正式发布之前，需要写浏览器前缀
正式发布之后，按正式版本写即可，无需加浏览器兼容前缀

六、过渡 transition

概念：让css的属性值在一定的时间内平滑地过渡，但是需要条件才能触发。
格式：transition:参与过渡的属性 过渡时间 过渡速率 延迟时间;
案例：  transition:all 1s linear 0s;
参数：
    参数1   transition-property    参与过渡的对象
          ——哪些属性参与过渡，如果都参与过渡，写all
    参数2   transition-duration    过渡时间(1s==1000ms)
    参数3   transition-timing-function  过渡速率
          *——linear                        匀速
          ——ease                          初始高速，逐渐慢下来
          ——ease-in                       加速
          ——ease-out                      减速
          ——ease-in-out                   先加速后减速
          ——steps()                       分段，分步骤
          ——贝赛尔曲线cubic-bezier()       贝塞尔曲线网址：http://cubic-bezier.com/
    参数4   transition-delay       延迟时间 
注意事项：
  1）谁发生变化，把过渡效果加给谁。
  2）只有存在过程的一些属性值变化，咱们才能看到过渡效果。
  3）过渡如果写在触发条件里，只有去的时候有效果，恢复时候没有效果。

七、2d效果 transform

1、位移 translate()

    格式: transform:translate(x,y);
    特点:
      1）参数1为x轴位移，正数向右动，负数向左动；
         参数2为y轴位移，正数向下动，负数向上动。
      2）第二个参数可以省略，省略时补全为0。
      3）单独写X轴位移transform:translateX(x);
         单独写Y轴位移transform:translateY(y);
      4）其实位移效果，你用定位也行写,它和relative比较像。

2、旋转 rotate()

      格式：transform:rotate(xxdeg);
      特点：
        1）默认沿着中心点旋转，正数顺时针，负数逆时针
        2）绕X轴旋转    transform:rotateX(180deg);
        3）绕Y轴旋转    transform:rotateY(xxdeg);
        4）当元素发生旋转时，内容也会跟着旋转。     

3、缩放 scale()

      格式：transform: scale(1,1);
      特点：
        1）默认沿着中心点缩放。修改缩放原点可以用origin
        2）第一个参数为宽度缩放，第二个为高度缩放,，默认值为1,1
        3）第二个参数可以省略，默认第二个参数和第一个一致（区别位移translate();）
        4）支持负值，负值为翻转缩放

4、倾斜 skew()

      格式：transform: skew(1,1);
      特点：
        1）支持两个参数，第一个为x轴倾斜，第一个为y轴倾斜
        2）一个参数，默认为x轴，y轴为0
        3）支持skewx()和skewy()
        4）支持负值

5、2d转换原点 transform-origin:x y;

      1）参数1为转换原点X轴坐标，参数2为转换原点Y轴坐标。
      2）参数支持像素数值、百分比、关键词。
      3）转换原点可以在元素之外。

6、2d的多属性应用

      如果要给元素添加至少两种2d效果时，不能写两次transform，会覆盖，应该使用如下写法：
        transform:translate(300px) rotate(368deg);