2017 04 10学习-CSDN博客

本文链接：https://blog.csdn.net/zllsorry/article/details/69945000

css3变形

1.旋转（rotate()）：改变图形的位置，但不改变图形的形状,后面跟的是度数。正值顺时针，负值逆时针。

用法：transform:rotate(45deg);

2. 扭曲（skew()）:让元素倾斜显示。将一个对象一其中心位置围绕xy轴旋转。

用法：transform:skew(x,y); transform:skew(45deg,30deg); 也可以仅用一个元素。x y,前面要表示

3. 缩放（ scale()）:让对象根据中心原点对对象进行缩放。

用法：transform:scale(0.5或者1.2)

4. 位移（translate()）:将元素向指定的方向移动。

用法：transform:translate(x,y); transform:translate(50px,40px); 也可以仅用一个元素。x y，前面要表示

5. 原点位置移动：（transform-origin: ;）

用法：transform-origin:left top; 还有：bottom center, right top; 等等。用百分数无用。

注意的是：此属性对于浏览器有要求，会有不兼容。

方法：-webkit-transform-origin:left top; (chrome safari)

-ms-transform-origin:left top; (ie9)

-o-transform-origin:left top; (opera)

-moz-transform-origin:left top; (firefox)

css3动画

1. 过渡属性 transition-property:; 就是通过鼠标的单击获得焦点被点击或对元素任何改变中触发并光滑的一动画效果改变css的属性

应用：transition-property:指定过渡或动态模拟的css属性

div{transition-property:width or height or all;}

div:hover{width:改变后的值；height:改变后的值;}

2. 过渡所需的时间 transition-duration:; 该属性主要用来设置一个属性过渡到另一个属性的时间。也就是从就是从旧属性过渡到新属性的时间。俗称持续时间。

应用：transition-duration:1s; (需要有属性的变化)

3. 过渡函数 transition-timing-function:; 该属性指的是指定浏览器的过渡速度，以及过渡期间的操作进展情况。

有：ease（默认值）又快到慢，逐渐变慢

linear 始终是恒速

ease-in 速度越来越快

ease-out 速度越来越慢

ease-in-out 先加速再减速

4. 过渡延迟时间 transition-delay 该属性主要用来指定一个动画开始执行的时间（点上去多久才会开始改变）注意与transition-duration 区别

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        body{background: #ebebeb;}
          .a{width:200px;
            height:200px;
            border: 10px solid white;
            background-color: red;
            margin:30px auto;
            transition-property:all;
            }
            .a:hover{height: 300px; width:300px;}
            .b{width:200px;
            height:200px;
            border: 10px solid white;
            background-color: blue;
            margin:30px auto;
            transition-property:all;
            transition-duration:1s;
            transition-delay:5s;
            transition-timing-function:ease-in;
            }
            .b:hover{border-radius: 100%;}
        </style>
    </head>
    <body>
      <div class="a"></div>
        <div class="b"></div>
    </body>
</html>