当前位置：首页 > article >正文

CSS3_过渡（八）

article 2024/11/20 1:03:19

1、过渡

1.1 过渡的基本使用

在需要过渡属性的元素内开启过渡属性，同时设置过渡时间以保证过渡效果的出现；

只有值为数字或者属性能转换为数字的属性才支持过渡。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>过渡的基本使用</title>
    <style>
        div {
            margin: 0 auto;
            margin-top: 100px;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            opacity: 0.5;

            /* 所有能开启过渡的属性全部开启 */
            transition-property: all;
            /* 设置过渡时间 */
            transition-duration: 1s;
        }

        div:hover {
            width: 400px;
            height: 400px;
            background-color: aqua;
            transform: rotate(45deg);
            opacity: 1;
            box-shadow: 0px 0px 20px black;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

1.2 过渡高级使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>过渡的基本使用</title>
    <style>
        .outer {
            width: 1300px;
            height: 900px;
            border: 1px solid black;
        }

        .outer:hover .inner {
            width: 1300px;
        }

        .inner {
            width: 200px;
            height: 100px;

            /* 所有能开启过渡的属性全部开启 */
            transition-property: all;
            /* 设置过渡时间 */
            transition-duration: 2.5s;


            /* 设置过渡等待时间 */
            /* transition-delay: 2s; */
        }

        .box1 {
            background-color: antiquewhite;
            transition-timing-function: ease;
        }

        .box2 {
            background-color: green;
            transition-timing-function: linear;
        }

        .box3 {
            background-color: pink;
            transition-timing-function: ease-in;
        }

        .box4 {
            background-color: purple;
            transition-timing-function: ease-out;
        }

        .box5 {
            background-color: burlywood;
            transition-timing-function: ease-in-out;
        }

        .box6 {
            background-color: chocolate;
            transition-timing-function: step-start;
        }

        .box7 {
            background-color: red;
            transition-timing-function: step-end;
        }

        .box8 {
            background-color: yellow;
            transition-timing-function: steps(20);
            /* 直接开始 */
            /* transition-timing-function: steps(20, start); */
            /* 等一会再开始 */
            /* transition-timing-function: steps(20, end); */
        }

        .box9 {
            background-color: greenyellow;
            /* 贝塞尔曲线 */
            transition-timing-function: cubic-bezier(.65, 1.48, 1, 1.21);
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner box1">ease(慢快慢，默认)</div>
        <div class="inner box2">linear(匀速)</div>
        <div class="inner box3">ease-in(慢快)</div>
        <div class="inner box4">ease-out(快慢)</div>
        <div class="inner box5">ease-in-out(慢快慢)</div>
        <div class="inner box6">step-start(不考虑过渡时间，直接到终点)</div>
        <div class="inner box7">step-end(过渡时间结束直接到终点)</div>
        <div class="inner box8">steps(分步到达终点)</div>
        <div class="inner box9">贝塞尔曲线</div>
    </div>
</body>

</html>

1.3 过渡复合属性

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>复合属性</title>
    <style>
        .outer {
            height: 100px;
            width: 1000px;
            border: 1px solid black;
        }

        .outer:hover .inner {
            width: 1000px;
            /* transition-duration、transition-property、transition-delay、transition-timing-function */
            /* 过渡时间、过渡元素、过渡延迟时间、过渡类型 */
            transition: 3s all 0.2s linear;
        }

        .inner {
            height: 100px;
            width: 100px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>

1.4 过渡实现案例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        .outer {
            position: relative;
            cursor: pointer;
            overflow: hidden;
            height: 400px;
            width: 700px;
            margin: 0 auto;
            margin-top: 40px;
        }

        .outer:hover .mask {
            opacity: 0.5;

        }

        .outer:hover img {
            transform: scale(1.6) rotate(30deg);
        }

        img {
            height: 400px;
            transition: 0.5s linear;
        }

        .mask {
            height: 400px;
            width: 700px;
            background-color: black;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            color: white;
            line-height: 400px;
            text-align: center;
            font-size: 50px;
            transition: 1s linear;
        }
    </style>
</head>

<body>
    <div class="outer">
        <img src="../images/bg.jpg" alt="">
        <div class="mask">风景</div>
    </div>
</body>

</html>