CSS知识总结（八）

CSS常用样式

8.变形样式

　改变元素的大小，透明，旋转角度，扭曲度等。

　transform : none | <transform-function>

　<transform-function>表示一个或多个变换函数，以空格分开，也就是说我们可以同时对一个元素进行transform的多种属性操作。

　温馨提示：以往我们叠加效果都是用逗号隔开，但transform中使用多个属性时是用空格隔开。

　　1）translate()

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

　　例子源代码：

/* CSS代码 */

.box1{

    width:200px;

    height:50px;

    border:1px solid #000;

}

.box1 p{

    padding:;

    margin:;

    width:200px;

    height:50px;

    background:#ccc;

    transform:translate(20px,20px);

}

<!-- HTML代码 -->

<body>

    <div class="box1">

        <p>translate(20px,20px)</p>

    </div>

</body>

　　效果：

translate(20px,20px)

　　2）translateX()

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

　　例子源代码：

/* CSS代码 */

.box2{

    width:200px;

    height:50px;

    border:1px solid #000;

}

.box2 p{

    padding:;

    margin:;

    width:200px;

    height:50px;

    background:#ccc;

    transform:translateX(20px);

}

<!-- HTML代码 -->

<body>

    <div class="box2">

        <p>translateX(20px)</p>

    </div>

</body>

　　效果：

translateX(20px)

　　3）translateY()

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

　　例子源代码：

/* CSS代码 */

.box3{

    width:200px;

    height:50px;

    border:1px solid #000;

}

.box3 p{

    padding:;

    margin:;

    width:200px;

    height:50px;

    background:#ccc;

    transform:translateY(20px);

}

<!-- HTML代码 -->

<body>

    <div class="box3">

        <p>translateY(20px)</p>

    </div>

</body>

　　效果：

translateY(20px)

　　4）rotate()

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

　　例子源代码：

/* CSS代码 */

.box4{

    width:100px;

    height:100px;

    border:1px solid #000;

}

.box4 p{

    padding:;

    margin:;

    width:100px;

    height:100px;

    background:#ccc;

    transform:rotate(45deg);

}

<!-- HTML代码 -->

<body>

    <div class="box4">

        <p>rotate(45deg)</p>

    </div>

</body>

　　效果：

rotate(45deg)

　　5）transform-origin

　　　　指定元素的中心点。

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

　　例子源代码：

/* CSS代码 */

.box5{

    width:100px;

    height:100px;

    border:1px solid #000;

}

.box5 p{

    padding:;

    margin:;

    width:100px;

    height:100px;

    background:#ccc;

    transform-origin:0 0;

    transform:rotate(15deg);

}

<!-- HTML代码 -->

<body>

    <div class="box5">

        <p>rotate(15deg)</p>

    </div>

</body>

　　效果：

rotate(15deg)

　　6）scale()

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

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

　　例子源代码：

/* CSS代码 */

.box6{

    width:100px;

    height:100px;

    border:1px solid #000;

}

.box6 p{

    padding:;

    margin:;

    width:100px;

    height:100px;

    background:#ccc;

    transform:scale(0.8,0.8);

}

<!-- HTML代码 -->

<body>

    <div class="box6">

        <p>scale(0.8,0.8)</p>

    </div>

</body>

　　效果：

scale(0.8,0.8)

　　7）skew()

　　　　指定对象skew transformation（斜切扭曲）。

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

　　例子源代码：

/* CSS代码 */

.box7{

    width:100px;

    height:100px;

    border:1px solid #000;

}

.box7 p{

    padding:;

    margin:;

    width:100px;

    height:100px;

    background:#ccc;

    transform:skew(30deg,10deg);

}

<!-- HTML代码 -->

<body>

    <div class="box7">

        <p>skew(30deg,10deg)</p>

    </div>

</body>

　　效果：

skew(30deg,10deg)

　　如果设置"transform:skewX(30deg);"：

skewX(30deg)

　　如果设置"transform:skewY(30deg);"：

skewY(30deg)

9.过渡动画

　　1）过渡属性 （transition-property）

　　　　设置对象中的参与过渡的属性。

　　　　默认值为：all，默认为所有可以进行过渡的css属性。如果提供多个属性值，以逗号进行分隔。

　　　有过渡效果的属性：

　　例子源代码：

/* CSS代码 */

.property{

    width:200px;

    height:100px;

    border:1px solid #000;

    background:#fff;

    color:#000;

    transition-property:background-color,color;

}

.property:hover{

    background:#000;

    color:#fff;

}

<!-- HTML代码 -->

<body>

    <p>请将鼠标移动到下面的矩形上：</p>

    <div class="property">

        设置过渡的属性：

        background-color , color

    </div>

</body>

　　效果：

请将鼠标移动到下面的矩形上：

设置过渡的属性：
background-color , color

　　2）过渡所需时间（transition-duration）

　　　　设置对象过渡的持续时间，就是从旧属性过渡到新属性所花的时间。

　　　　如果提供多个属性值，以逗号进行分隔。

　　例子源代码：

/* CSS代码 */

.duration{

    width:200px;

    height:100px;

    border:1px solid #000;

    background:#fff;

    color:#000;

    transition-property:background-color,color;

    transition-duration:2s;

}

.duration:hover{

    background:#000;

    color:#fff;

}

<!-- HTML代码 -->

<body>

    <p>请将鼠标移动到下面的矩形上：</p>

    <div class="duration">

        过渡的时间是：2s

    </div>

</body>

　　效果：

请将鼠标移动到下面的矩形上：

过渡的时间是：2s

　　3）过渡函数（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 之间的数值。

　　例子源代码：

/* CSS代码 */

.ease{

    width:100px;

    height:100px;

    border:1px solid #000;

}

.ease-in{

    margin-left:0px;

    transition-property:all;

    transition-duration:2s;

    transition-timing-function:ease-in;

}

.ease-out{

    margin-left:0px;

    transition-property:all;

    transition-duration:2s;

    transition-timing-function:ease-out;

}

.ease:hover{

    margin-left:200px;

}

<!-- HTML代码 -->

<body>

    <p>请将鼠标移动到下面的矩形上，并跟着矩形移动：</p>

    <div class="ease ease-in">

        加速 ease-in

    </div>

    <div class="ease ease-out">

        减速 ease-out

    </div>

</body>

　　效果：

请将鼠标移动到下面的矩形上，并跟着矩形移动：

加速 ease-in

减速 ease-out

　　4）过渡延迟时间（transition-delay）

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

　　例子源代码：

/* CSS代码 */

.delay{

    width:200px;

    height:100px;

    border:1px solid #000;

    background:#fff;

    color:#000;

    transition-property:background-color,color;

    transition-duration:2s;

    transition-delay:1s;

}

.delay:hover{

    background:#000;

    color:#fff;

}

<!-- HTML代码 -->

<body>

    <p>请将鼠标移动到下面的矩形上：</p>

    <div class="delay">

        过渡延迟的时间是：1s

    </div>

</body>

　　效果：

请将鼠标移动到下面的矩形上：

过渡延迟的时间是：1s

　　5）过渡动画缩写（transition）

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

　　例子源代码：

/* CSS代码 */

.all{

    width:208px;

    height:100px;

    border:1px solid #000;

    background:#fff;

    color:#000;

    transition:all 2s ease-in 1s;

}

.all:hover{

    background:#000;

    color:#fff;

}

<!-- HTML代码 -->

<body>

    <p>请将鼠标移动到下面的矩形上：</p>

    <div class="all">

        transition:all 2s ease-in 1s;

        所有属性 过渡2s 加速 延迟1s

    </div>

</body>

　　效果：

请将鼠标移动到下面的矩形上：

transition:all 2s ease-in 1s; 所有属性过渡2s 加速延迟1s