CSS基础3

1.变形样式

transform : none | <transform-function>，改变元素的大小，透明，旋转角度，扭曲度等。<transform-function>表示一个或多个变换函数，以空格分开

1）translate(x px，y px)

指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。

2）translateX(x px)

指定对象X轴（水平方向）的平移

3）translateY(y px)

指定对象Y轴（垂直方向）的平移

4）rotate(degit deg)

指定对象的2D rotation（2D旋转）

 .box1{
     width:200px;
     height:50px;
     border:1px solid #000;
 }

 .box1 p{
     padding:0;
     margin:0;
     width:200px;
     height:50px;
     background:#ccc;
     transform:translate(20px,20px) rotate(45deg)
 }

5）transform-origin

指定元素的中心点。

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处

6）scale(x,y)

指定对象的2D scale（2D缩放）。

第一个参数表示水平方向缩放的倍数，第二个参数表示垂直方向的缩放倍数。如果第二个参数未提供，则默认取第一个参数的值

.box6{
     width:100px;
     height:100px;
     border:1px solid #000;
 }
 .box6 p{
     width:100px;
     height:100px;
     background:#ccc;
     transform:scale(0.8,0.8)
 }

<div class="box6">
    <p>scale(0.8,0.8)</p>
</div>

7）skew(x deg,y deg)

斜切扭曲,第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。如果第二个参数未设置，则默认值为0.

 .box7{
     width:100px;
     height:100px;
     border:1px solid #000;
 }
 .box7 p{
     width:100px;
     height:100px;
     background:#ccc;
     transform:skew(30deg,10deg)
    }

<div class="box7">
    <p>skew(30deg,10deg)</p>
</div>

2.过渡动画

transition-property:过渡属性

transition-duration：过渡所需时间

.duration{
     width:200px;
     height:100px;
     border:1px solid #000;
     background:green;
     color:#000;
     transition-property:background-color,color;
     transition-duration:10s;
 }
 .duration:hover{
     background:#000;
     color:red;
 }

<p>请将鼠标移动到下面的矩形上：</p>
<div class="duration">
    过渡的时间是：10s
</div>

（2.）过渡函数（transition-timing-function）

其中要包括以下几种函数：

　　　　①ease : 默认值，逐渐变慢(等于 cubic-bezier(0.25,0.1,0.25,1))

　　　　②linear : 匀速过渡效果(等于 cubic-bezier(0,0,1,1))

　　　　③ease-in : 加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))

　　　　④ease-out : 减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))

　　　　⑤ease-in-out : 加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1))

　　　　⑥cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值，可能的值是 0 至 1 之间的数值。

 .ease{
     width:100px;
     height:100px;
     border:1px solid #000;
 }
 .ease-in{
     margin-left:0px;
     transition-property:margin-left;
     transition-timing-function:ease-in;
     transition-duration:2s;
 }
.ease:hover{
    margin-left:200px;
}

<p>请将鼠标移动到下面的矩形上，并跟着矩形移动：</p>
<div class="ease ease-in">
    加速 ease-in
</div>

（3.）过渡延迟时间（transition-delay）

指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行

.delay{
    width:200px;
    height:100px;
    border:1px solid #000;
    background:#fff;
    color:#000;
    transition-property:background-color,color;
    transition-delay:1s;
    transition-duration:2s;
}
.delay:hover{
    background:#000;
    color:#fff;
}

<p>请将鼠标移动到下面的矩形上：</p>
<div class="delay">
    过渡延迟的时间是：1s
</div>

（4）过渡动画缩写（transition）

　transition : <transition-property> < transition-duration > <transition-timing-function> < transition-delay> , ……