CSS3(三)

CSS3核心模块

transition 过渡动画

• transition-property 过渡属性 all|[attr]
• transition-duration 过渡时间
• transition-delay 延迟时间

• transition-timing-function 运动类型

  • ease：（逐渐变慢）默认值
  • linear：（匀速）
  • ease-in：(加速)
  • ease-out：（减速）
  • ease-in-out：（先加速后减速）
  • cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）
  • http://cubic-bezier.com/
    

     #div1:hover {
            width: 200px;
            height: 200px;
    /*     -webkit-transition-property: width,height;
            transition-property: width,height;  !*过渡属性*!
    
            -webkit-transition-duration: 1s,2s;
            transition-duration: 1s,2s;  !*执行的过程时间*!
    
            -webkit-transition-timing-function: linear;
            transition-timing-function: linear;!*动画类型*!
    
            -webkit-transition-delay: 0.5s;
            transition-delay: 0.5s;!*动画延迟时间*!
    
             transition:all 1s linear 0s;
            */
            -webkit-transition:width 1s linear 0s,height 2s linear 0s;
            transition:width 1s linear 0s,height 2s linear 0s;
    
        }

• webkit内核下： ele.addEventListener(‘webkitTransitionEnd’,function(){},false);
• 标准浏览器下:
  ele.addEventListener(‘transitionend’,function(){},false)
• transition 执行次数问题

transform 变型属性

• 元素变形的基准点:默认是元素的中心点； rotate，skew，scale可以改变元素变形的基准点，translate的基准点不会改变，就是元素的中心点

• rotate() 旋转函数

  • deg 度数
  • Transform-origin 旋转的基点

       #div1{
          width: 200px;
          height: 200px;
          background: red;
          margin: 200px auto;
          -webkit-transition: transform 1s;
          -moz-transition: transform 1s;
          -ms-transition: transform 1s;
          -o-transition: transform 1s;
          transition: transform 1s;
      }
      #div1:hover{
          transform: rotate(45deg);
          -webkit-transition: transform 1s;
          -moz-transition: transform 1s;
          -ms-transition: transform 1s;
          -o-transition: transform 1s;
          transition: transform 1s;
      }

• skew() 倾斜函数
  
  • skewX()正直向左边倾斜，负直向右边倾斜
  • skewY()正直向下边倾斜

• scale() 缩放函数 默认值是1

  • scaleX()
  • scaleY()

        #div1{
          width: 200px;
          height: 200px;
          background: red;
          margin: 200px auto;
          -webkit-transition: transform 1s;
          -moz-transition: transform 1s;
          -ms-transition: transform 1s;
          -o-transition: transform 1s;
          transition: transform 1s;
      }
      #div1:hover{
          /*transform: skewX(45deg) skewY(45deg);*/
          /*transform: scaleY(0.5);*/
          /*transform: scaleX(0.5);*/
          transform: scale(0.5);
          transform-origin:left ;
          /*transform: translateY(50px) rotate(45deg);*/
          -webkit-transition: transform 1s;
          -moz-transition: transform 1s;
          -ms-transition: transform 1s;
          -o-transition: transform 1s;
          transition: transform 1s;
      }

• translate() 位移函数
  
  • translateX()
  • translateY()

animation 帧动画

关键帧——@keyframes

• 类似于flash
  
  • 定义动画在每个阶段的样式，即帧动画
• 关键帧的时间单位
  
  • 数字：0%、25%、100%等(设置某个时间段内的任意时间点的样式)
  • 字符：from(0%)、to(100%)
• 格式
  @keyframes 动画名称
  {
  动画状态
  }
• 必要属性
  
  • animation-name 动画名称（关键帧名称）
  • animation-duration 动画执行时间
    可选属性
    - animation-timing-function
  • linear 匀速。
  • ease 缓冲。
  • ease-in 由慢到快。
  • ease-out 由快到慢。
  • ease-in-out 由慢到快再到慢。
  • cubic-bezier(number, number, number, number)：
    特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
• 可选属性
  
  • animation-delay 动画延迟
  • animation-iteration-count 重复次数
  • animation-direction 动画运行的方向
  • normal | reverse | alternate | alternate-reverse
  • animation-play-state 动画状态
  • running | paused
  • animation-fill-mode 动画结束后的状态
    none | forwards| backwards | both

• demo

  • 加载图标的制作
    

    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    

        ul,li{
          list-style: none;
      }
      li{
          display: inline-block;
          margin: 0 2px;
          width: 6px;
          height: 70px;
          background: blue;
          border-radius: 6px;
          animation: move 1s infinite both;
      }
      ul li:nth-child(1){
          animation-delay: 0.4s;
      }
      ul li:nth-child(2){
          animation-delay: 0.2s;
      }
      ul li:nth-child(3){
          animation-delay: 0s;
      }
      ul li:nth-child(4){
          animation-delay:0.2s;
      }
      ul li:nth-child(5){
          animation-delay:0.4s;
      }
      @keyframes move {
          0%{
              transform: scale(1);
          }
          50%{
              transform: scale(0.5);
          }
          100%{
              transform: scale(1);
          }
      }

3D变换

• transform-style : flat | preserve-3d (3D空间展示)
• perspective 透视效果
• transform:perspective(800px) 直接作用在子元素上
• perspective-origin 透视点位置（默认中心点）
• transform 新增函数
  
  • translate3d( tx , ty, tz )
    translateX() translateY() translateZ()
  • rotate3d( rx , ry , rz，a)
    rotateX() rotateY() rotateZ()
  • scale3d( sx , sy , sz)
    scaleX() scaleY() scaleZ()

<div id="wrap">
    <div class="slide"></div>
</div>

 #wrap{
            width: 200px;
            height: 200px;
            border: 1px solid green;
            margin: 100px auto;
            transform-style: preserve-3d;/*wrap下的子元素在3D空间展示，【作用在父标签元素】*/
            perspective: 2000px;/*1.景深效果/透视效果【有近大远小的效果】*/
        }
        #wrap .slide{
            width: 100%;
            height: 100%;
            background: red;
           /* transform:perspective(2000px);*//*2.直接作用在变形元素上的*/
        /*rotateX(0deg);正值-》前翻，负值-》后翻*/
        /*rotateY(45deg);正值-》右翻，负值-》左翻*/
        /*rotateZ(45deg);在z轴上旋转效果等同于2d变形的rotate方法的效果*/
            rotate3d(rx,ry,rz,a);
           /* rx:x轴上的矢量坐标 rotate3d(1,0,0,45deg);-->rotateX(45deg)
            ry:y轴上的矢量坐标  rotate3d(0,1,0,45deg);-->rotateY(45deg)
            rz:z轴上的矢量坐标  rotate3d(0,0,1,45deg);-->rotateZ45deg)
            a:角度*/
        }
        #wrap:hover .slide{
           /* -webkit-transform: translateZ(-200px);
            -webkit-transition: 1s;*/

         /*   transform: rotateX(45deg) scale3d(1,1,0.5);!*scaleZ在z轴上的缩放如果单独使用不起作用，必须配合者其他变形方法一起使用*!
            transition: 1s;*/

            /*transform:rotateX(-45deg);!*正值-》前翻，负值-》后翻*!*/
           /* transform:rotateY(45deg);!*正值-》右翻，负值-》左翻*!
            transition: 1s;*/
            transform: rotate3d(1,0,0,45deg);
            transition: 1s;
        }