你的位置:首页 > 网页设计

[网页设计]css变形 transform


transition:过度属性

  • transition-property 规定设置过度效果的css属性的名称,默认可以写all

  • transition-duration 规定完成过度效果需要多少秒或毫秒

  • transition-timing-function: 默认easetransition-delay:延时时间

    • ease:逐渐变慢
    • linear:匀速
    • ease-in:加速
    • ease-out:减速
    • ease-in-out:先加速在减速
    • cubic-bezier:贝塞尔曲线  

 transitionend:过度完成事件

1 function addEnd(obj,fn){2   obj.addEventListener('WebkitTransitionEnd',fn,false);3   obj.addEventListener('transitionend',fn,false);4 }5 function removeEnd(obj,fn){6   obj.removeEventListener('WebkitTransitionEnd',fn,false);7   obj.removeEventListener('transitionend',fn,false);8 }

 

transform:变形

  • 旋转:rotate():度数

  • 斜切:skew():度数

    • skewX
    • skewY  
  • 缩放:scale():正数、负数、小数

    • scaleX
    • scaleY
  • 位移:translate():css支持的单位都可以

    • translateX
    • translateY  
  • transform的执行顺序:后写的先执行

    • transform: scale(2) rotate(50deg); 先执行旋转,在执行缩放 

 

练习:时钟demo


练习:导航