CSS 小结笔记之变形、过渡与动画的示例

1、过渡 transition 

过渡属性用法: transition :ransition-property  transition-duration  transition-timing-function   transition-delay 

可以一起指定也可以分别单独指定

transition-property: 是要过渡的属性(如width,height),all是所有都改变。

transition-duration:花费的时间,单位为s或ms

transition-timing-function:是指定动画类型(运动区曲线),运动曲线有以下几种

ease=>逐渐慢下来(默认值) linear=>匀速 ease-in=>加速 ease-out=>减速 ease-in-out=>先加速在减速 

transition-delay 延迟时间,单位为s或ms

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
        div {
            width: 100px;
            height: 200px;
            background-color: aqua;
            transition: width 2s ease-in-out 0.5s;
        }
        
        div:hover {
            width: 500px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

结果如下,当鼠标上上去后变化不再是瞬间完成,而是过渡完成。

(b)缩放 scale(x,y)

x,y设置大于1 是放大,小于1 是缩小。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
        }
        
        div:hover {
            transform: scale(0.5, 2);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

(c)旋转 rotate(x deg)

x指定度数值,正数是顺时针旋转,负数是逆时针旋转。

旋转可以使用 transform-origin  指定旋转中心点,transform-origin 给left top right bottom 也可以指定具体的像素值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotate(120deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

(d)倾斜 skew(x deg ,y deg)

x,y分别指定倾斜在x,y方向上的角度,可以为负数。y值不写默认为0。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid red;
            transition: all 1s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: skew(30deg, 20deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

CSS 小结笔记之变形、过渡与动画的示例

扫一扫手机访问