第十三章 css3的动画属性

浏览器内核(浏览器的解析代码机制)

• ie浏览器 Trident内核 -ms-
• 火狐浏览器 Gecko内核 -moz-
• 欧鹏浏览器 Blank内核 -o-
• 谷歌浏览器 Webkit内核 -webkit-
  • 过渡的兼容写法

    /* 标准写法 */
    transition: all 1s;
    /* 火狐*/
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
  

渐变 ie9及以下不支持

• 线性渐变：background-image/background:linear-gradient(渐变方向,颜色1,颜色2……)
  • 方向 设置方向一定要加 to
    • to bottom; 向下

        background-image: linear-gradient(to bottom, red, yellow, blue, green);
      

    • to top; 向上
    • to left 向左
    • to right 向右
    • to right top 右上角
    • to right bottom 右下角
    • to left top 左上角
    • to left bottom 左下角
    • 数值+deg

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

• 重复性的线性渐变 background-image/background: repeating-linear-gradient(渐变方向,颜色1,颜色2……)

   .box2 {
         /* 0-10px 红色纯色 10px-50px 红色到蓝色的过渡 50px之后是蓝色纯色*/
          background-image: repeating-linear-gradient(red 10px, blue 50px);
          font-size: 50px;
          line-height: 50px;
      }
  

• 径向渐变 background-image/background:radial-gradient(方向,颜色值1,颜色值2……)
  • 方向：和背景图的位置取值一样，设置方向一定要加浏览器前缀，否则不生效

    background-image: -webkit-radial-gradient(left top, red, yellow);
  

• 重复性的径向渐变 background-image: repeating-radial-gradient(方向, 颜色值1,颜色值2……);

    background-image: repeating-radial-gradient(blue, red 20px);
  

2d变形 transform:位移|旋转|缩放|倾斜

• 位移
  • transform:translateX(数值+px) 向右和向下为正数
  • transform:translateY(数值+px) 向右和向下为正数
  • 两个方向同时位移

    transform: translateX(100px) translateY(-100px);
    transform: translate(100px,-100px); 
    

  • 写一个值代表的是x轴的位移

     transform: translate(100px); 
    

  • 移动之后，原来的位置依旧存在
  • 利用位移实现水平垂直居中
    • 优点：不论大盒子和小盒子的宽高如何变化，都能够识别到宽高的百分比

      .box{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%); 百分数参考的是当前盒子的宽高        
      }
    

• 旋转
  • x轴的旋转 transform:rotateX(数值+deg)
  • y轴的旋转 transform:rotateY(数值+deg)
  • z轴的旋转 transform:rotateZ(数值+deg) 顺时针是正数，逆时针是负数
  • 只写一个值：
    transform: rotate(-600deg); 代表的是z轴的旋转
  • 位移和旋转同时存在

     表示先位移后旋转
     transform: translateX(300px) rotateZ(90deg);
     先旋转，坐标轴会跟着变化，位移会根据新的坐标轴去移动
     transform: rotateZ(90deg) translateX(300px);
    

• 缩放
  • x轴的缩放 transform:scaleX(数值) 1：正常 0-1之间是缩小 >1是放大
  • y轴的缩放 transform:scaleY(数值) 1：正常 0-1之间是缩小 >1是放大
  • 两个方向都有

    div{
      transform: scaleX(0.4) scaleY(2);
      transform: scale(0.4, 2);
      transform: scale(2);
    }
  
  

• 倾斜
  • x轴的倾斜 transform:skewX(数值deg)
  • y轴的倾斜 transform:skewY(数值deg)
  • xy轴的倾斜

    div{
       transform: skew(40deg, 50deg);
    }
    

  • 一个值代表的只是x轴的倾斜
• 变形原点：transform-origin:水平 垂直
  • 水平：left/center/right 垂直：top/center/bottom
  • 数值+px
  • 百分比

利用外部样式表写过渡属性存在的问题及解决

• 问题：利用外部样式表写过渡属性可能会在页面初始的时候就有过渡效果
• 解决：给整个结构也就是html的标签下面添加

过渡属性对 display:none到display:block是不生效的