css变形 transform

2018-06-24 00:39:37来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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 }
注:1在transition里,如果写了多个,那没改变一次样式,就会触发一次事件
  2注意重复触发transitionend事件。比如下面重复改变div的y轴位置
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;}
 8     </style>
 9 </head>
10 <body>
11 <div id="nav"></div>
12 <script>
13     var oHome=document.getElementById("nav");
14     var count = 10;
15     oHome.onclick = function(){
16         count += 20;
17         oHome.style.transform = 'translate(0,'+ count +'px)'
18         addEnd(this,function(){
19             count += 20;
20             oHome.style.transform = 'translate(0,'+ count +'px)'
21         })
22     }
23     function addEnd(obj,fn) {
24         obj.addEventListener('WebkitTransitionEnd',fn,false);
25         obj.addEventListener('transitionend',fn,false);
26     }
27 </script>
28 </body>
29 </html>
View Code

 

transform:变形

  • 旋转:rotate():度数

  • 斜切:skew():度数

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

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

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

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

 

以上transform的值,也会根据中心点(transform-origin)来改变

 

 

练习:时钟demo


练习:导航

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:谈谈vertical-align的text-bottom和text-top - 韦奕

下一篇:HTML标签小结