transition过渡

transition-property:规定设置过渡效果的CSS属性的名称。

transition-duration:规定完成过渡效果需要多少秒或毫秒。

transition-delay:定义过渡效果何时开始。

  • 当值为正数时,为延迟。

  • 当值为负数时,为提前。

transition-timing-function:规定速度效果的速度曲线。

  • linear

  • ease(默认值)

  • ease-in

  • ease-out

  • ease-in-out

  • cubic-bezier

<!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>ToDo Blog</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            transition-property: all;
            transition-duration: 1s;
            transition-delay: 1s;
            transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        /* 复合样式 */
        /* div{
            width: 100px;
            height: 100px;
            background: red;
            transition: 1s 2s linear;
        } */

        div:hover {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

transform变形

translate:位移

  • translateX

  • translateY

  • translateZ(3D)

scale:缩放

  • scaleX

  • scaleY

  • scaleZ(3D)

rotate:旋转(旋转值单位为角度 deg / 弧度 rad)

  • rotateX(3D)

  • rotateY(3D)

  • rotateZ(和rotate是等级关系,正值按顺时针旋转,负值按逆时针旋转)

skew:斜切

  • skewX(旋转值单位为角度 deg,正值向左倾斜,负值向右倾斜)

  • skewY

<!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>ToDo Blog</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 30px auto;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background: red;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background: yellow;
        }
        .box4 {
            width: 100px;
            height: 100px;
            background: green;
        }
        .box5 {
            width: 200px;
            height: 200px;
            background: blueviolet;
        }
        .box1:hover .box2 {
            transform: translate(100px, 0);
        }
        .box3:hover {
            transform: scale(2, 2);
        }
        .box4:hover {
            transform: rotate(45deg);
        }
        .box5:hover {
            transform: skew(30deg, 0);
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>
</html>

transform注意事项

  • 变形操作不会影响到其他元素。

  • 变形操作只能添加给块元素,不能添加给内联元素。

  • 可以同时添加多个变形操作。

  • 变形操作是有顺序的,执行顺序为先执行后面的操作,再执行前面的操作。

  • translate会受到rotate、scale、skew的影响

不起眼的小广告

do淘客

上一篇:BFC规范

下一篇:CSS animation动画