CSS3-渐变，过渡，3d动画

 css渐变色
    线性渐变
    /* 渐变麻烦写法 */
        .box1{
            background: -webkit-gradient(linear,left center ,right center,from(red),to(yellow),color-stop(0.4,blue),color-stop(0.6,green));
        }
        值：线性渐变，开始位置，结束位置，开始颜色，结束颜色，插入颜色（位置，颜色）···【先x轴后y轴】
     /* 渐变麻烦写法 */
        .box2{background:linear-gradient(to left top,red,yellow,blue,green)
        值：开始位置，颜色1，颜色2，颜色3···
    经向渐变
    /* 渐变麻烦写法 */
            background:-webkit-gradient(radial,150 150,10,150 150,300,from(white),to(red),color-stop(0.4,blue));
        值：径向渐变，内圆坐标，内圆半径，外圆坐标，外圆半径，开始颜色，结束颜色，插入颜色（位置，颜色）···
   /* 渐变麻烦写法 */
             background:radial-gradient( circle at 30%,yellow,blue);
        值：中心点位置，颜色1，颜色2，颜色3··

 

 svg画图
   特点：
        1.svg支持IE9以上
        2.svg叫做伸缩矢量图形
        3.svg可以通过文本编辑器来创建
        4.可以被搜索，索引，脚本化和压缩
        5.svg图形放大缩小尺寸不会失帧
   定义
       <svg class="can"></svg>创建画布
   绘制图形
       线体
        <line x1="50" y1="50" x2="200" y2="200" stroke="red"
         stroke-width="3"></line>
        值：x1，y1表示起始位置坐标
            x2，y2表示终止位置坐标
            stroke线体颜色
            stroke-width线体粗细
        圆
          <circle cx="100" cy="100" r="30" stroke="red" fill="pink"></circle>
          值：cx,cy圆的中心点坐标  r圆的半径 fill填充颜色
        椭圆
          <ellipse cx="100" cy="100" rx="60" ry="40" fill="blue"><ellipse>
          值：rx水平半径  ry垂直半径 
        矩形
          <rect x="50" y="50" width="100" height="150" rx="20" ry="90"></rect>
          值：x,y表示矩形的起始位置坐标  width宽度  height高度  rx ， ry 圆角弧度
        多边形
          <polygon points="0,100 100,10 200,50 100,150 50,100 "></polygon>
          值：xy以逗号分隔，多个值以空格分隔（x1,y1 x2,y2 x3,y3）
        路径
            [ M开始位置  Z结束位置  ]  
             L直线    H水平线    V垂直线   
             C曲线    S平滑曲线   Q贝塞尔曲线     A椭圆曲线
        阴影
           <filter id="f1" x="0,0" y="0" width="200%" height="200%">
           <feOffset result="offOut" dx="20" dy="20" in="SourceGraphic"></feOffset>
           <feGaussianBlur result="blurout" stdDeviation="10" in="offOut"></feGaussianBlur>
           <feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
             </filter>
           <rect x="0" y="0" width="100" height="100" fill="red" stroke="yellow" filter="url(#f1)" ></rect>
            值：x,y表示起始位置坐标  width宽度 height高度 feOffset偏移位置 dx ，dy是xy轴的偏移量
            feGaussianBlur模糊效果  stdDeviation模糊度 feBlend组合成整个面积 in关联多个标签
      
      
过渡
    1.transition-property指定过渡属性
      none不指定动画延迟效果  all所有都加上
    2.transition-duration过渡时间
      单位：秒数s
    3.transition-timing-function动画速率
      linear线性  ease平滑 
      ease-in由慢到快  ease-in-out由慢到快再到慢
    4.transition-delay延迟时间
      单位：秒数s 
变换transform
   1.translate（x,y,z）移动  默认会给x轴
     单位：像素或百分比
     translate（）translateY（）垂直移动 translate（）前后移动
   2.scale（x,y,z）缩放      默认xyz轴都缩放
     单位：数字，可以为小数，不可以为负数
     scaleX（）宽度缩放 scaleY（）高度缩放   scaleZ（）厚度缩放
   3.rotate(x,y,z)旋转       默认z轴
     单位：角度deg
     rotateX（）水平旋转  rotateY（）垂直旋转  rotateZ（） 中心点旋转
   4.skew（x，y）扭曲
     单位：角度deg            默认给X轴
     skwX() 水平扭曲  skewY() 垂直扭曲
   5.matrix（1，0，0，1，0，0）矩阵
     值：宽度缩放 垂直扭曲 水平扭曲 高度缩放 水平移动 垂直移动

 

3d
    transform-style:presrve-3d  开启3d
    transform-origin：x y z 偏移中心点
动画：不需要任何事件操作
    1.animation-name     动画名称
    2.animation-duration 动画时间   单位：秒数s
    3.animation-timing-function 动画速率
    4.animation-delay延迟时间  单位：秒数s
    5.animation-iteration=count 循环次数   单位：整数数字   infinite无限循环
    6.animation-direction 是否要反向运动
      normal 正常 alternate正反交替 注意：循环次数必须大于2，才能正反交替
    7.animation-paly-state动画状态
      running 运动  paused 停止
    8.animation-fill-model 动画时间之外状态
      none不设置       backwards 开始位置 forwards 结束位置
执行动画
    @keyframes +名称{
      方法1  form{}  
               to{}
      方法2    0%{} 50%{}  100%{}
    }