html+css基础：26、过渡(基本使用/高级使用/过渡复合属性/过渡案例)

Ⅰ、基本使用：transition-property: all;/transition-duration: 1s;

其一、代码为：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_基本使用</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            opacity: 0.5;
            /* 设置哪个属性需要过渡效果 */
            /* transition-property: width,height,background-color; */

            /* 让所有能过渡的属性，都过渡 */
            /* 此时的 transition-property: all; 表示所有可以过渡的属性都会应用过渡效果,此时的 transition-duration: 1s; 表示过渡时间为1秒 */
            transition-property: all;

            /* 分别设置时间 */
            /* transition-duration: 1s,1s,1s; */
            /* 设置一个时间，所有人都用 */
            transition-duration: 1s;
        }
        .box1:hover {
            width: 400px;
            height: 400px;
            background-color: green;
            transform: rotate(45deg);
            box-shadow: 0px 0px 20px black;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

// 鼠标 hover 之后的结果：

Ⅱ、高级使用：transition-timing-function: ease/linear/ease-in/ease-out/ease-in-out/step-start/step-end/steps(20,end)/cubic-bezier(1,.35,.78,1.24);

其一、代码为：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_高级使用</title>
    <style>
        .outer {
            width: 1300px;
            height: 900px;
            border: 1px solid black;
        }
        .outer:hover .box {
            width: 1300px;
        }
        .box {
            width: 200px;
            height: 100px;
            /* 让所有能过渡的属性，都过渡 */
            transition-property: all;
            /* 设置一个时间，所有人都用 */
            transition-duration: 5s;
            /* 过渡延迟 */
            /* transition-delay: 2s; */
        }
        .box1 {
            background-color: skyblue;
            /* 此时的 transition-timing-function: ease; 表示过渡效果是慢-快-慢 */
            transition-timing-function: ease;
        }
        .box2 {
            background-color: orange;
            /* 此时的 transition-timing-function: linear; 表示过渡效果是匀速 */
            transition-timing-function: linear;
        }
        .box3 {
            background-color: gray;
            /* 此时的 transition-timing-function: ease-in; 表示过渡效果是慢-快 */
            transition-timing-function: ease-in;
        }
        .box4 {
            background-color: tomato;
            /* 此时的 transition-timing-function: ease-out; 表示过渡效果是快-慢 */
            transition-timing-function: ease-out;
        }
        .box5 {
            background-color: green;
            /* 此时的 transition-timing-function: ease-in-out; 表示过渡效果是慢-快-慢 */
            transition-timing-function: ease-in-out;
        }
        .box6 {
            background-color: purple;
            /* 此时的 transition-timing-function: step-start; 表示过渡效果是不考虑过渡时间，直接到达终点 */
            transition-timing-function: step-start;
        }
        .box7 {
            background-color: deepskyblue;
            /* 此时的 transition-timing-function: step-end; 表示过渡效果是考虑过渡时间，但无过渡效果，过渡时间到了以后，瞬间到达终点 */
            transition-timing-function: step-end;
        }
        .box8 {
            background-color: chocolate;
            /* 此时的 transition-timing-function: steps(20,end); 表示过渡效果是分步进行的，共20步，end表示在每一步的结束时进行切换 */
            transition-timing-function: steps(20,end);
        }
        .box9 {
            background-color: rgb(18, 78, 34);
            /* 此时的 transition-timing-function: cubic-bezier(1,.35,.78,1.24); 表示使用自定义的贝赛尔曲线来控制过渡效果 */
            transition-timing-function: cubic-bezier(1,.35,.78,1.24);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">ease（慢，快，慢）</div>
        <div class="box box2">linear（匀速）</div>
        <div class="box box3">ease-in（慢，快）</div>
        <div class="box box4">ease-out（快，慢）</div>
        <div class="box box5">ease-in-out（慢，快，慢）</div>
        <div class="box box6">step-start不考虑过渡的时间，直接就是终点</div>
        <div class="box box7">step-end考虑过渡时间，但无过渡效果，过渡时间到了以后，瞬间到达终点</div>
        <div class="box box8">steps分步过渡</div>
        <div class="box box9">无敌的贝赛尔曲线</div>
    </div>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

// 鼠标 hover 之后的效果：

// 鼠标移除 hover 之后的效果：最终会回到初始状态

Ⅲ、过渡复合属性：transition:linear all 3s 0.5s;

其一、代码为：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_过渡复合属性</title>
    <style>
        .outer {
            width: 1000px;
            height: 100px;
            border: 1px solid black;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 此时的 transition:linear all 3s 0.5s; 第一个属性是 transition-timing-function，第二个属性是 transition-property，第三个属性是 transition-duration，第四个属性是 transition-delay；
                transition-timing-function: linear; 表示过渡效果是匀速
                transition-property: all; 表示所有可以过渡的属性都会应用过渡效果
                transition-duration: 3s; 表示过渡时间为3秒
                transition-delay: 0.5s; 表示过渡延迟0.5秒
            */
            transition:linear all 3s 0.5s;
        }
        .outer:hover .inner {
            width: 1000px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

// 鼠标 hover 之后的效果：

// 鼠标移除 hover 之后的效果：最终会回到初始状态

Ⅳ、过渡案例：

其一、代码为：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04_过渡案例</title>
    <style>
        .outer {
            width: 400px;
            height: 224px;
            position: relative;
            overflow: hidden;
        }
        .mask {
            width: 400px;
            height: 224px;
            background-color: black;
            color: white;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 224px;
            font-size: 100px;
            opacity: 0;
            transition: 1s linear;
            cursor: pointer;
        }
        img {
            /* 此时的 transition: 0.5s linear; 表示图片在悬停时应用过渡效果，过渡时间为0.5秒，过渡效果是匀速 */
            transition: 0.5s linear;
        }
        .outer:hover .mask {
            opacity: 0.5;
        }
        .outer:hover img {
            /* 此时的 transform: scale(1.6) rotate(20deg); 表示图片在悬停时放大1.6倍并旋转20度，且在鼠标hover在outer元素上的过渡时间内完成过渡 */
            transform: scale(1.6) rotate(20deg);
        }
    </style>
</head>
<body>
    <div class="outer">
        <img src="../images/shanghai.jpg" alt="">
        <div class="mask">上海</div>
    </div>
    <div class="outer">
        <img src="../images/shanghai.jpg" alt="">
        <div class="mask">上海</div>
    </div>
</body>
</html>

其二、结果为：

// 一进入页面后的页面：

// 鼠标 hover 之后的效果：

// 鼠标移除 hover 之后的效果：最终会回到初始状态

Ⅴ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/weixin_43405300/article/details/168880142