CSS3トランジションエフェクトの使用例の紹介-CSSチュートリアル-php.cn

CSS3トランジションエフェクトの使用例の紹介

高洛峰

リリース： 2017-03-13 17:47:00

オリジナル

1719 人が閲覧しました

この記事では主に CSS3 トランジション効果の例を詳しく紹介します。興味のある方は参考にしてください。

この記事の例は、参考のために CSS3 トランジション効果を共有します。具体的な内容は次のとおりです

。 :

CSS3トランジションエフェクトの使用例の紹介

実装コード:

transition.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transition</title>
    <style>
        #block {     
            width: 400px;     
            height: 300px;     
            background-color: #69C;     
            margin: 0 auto;     

            transition: background-color 1s, width 0.5s ease-out;     
            -webkit-transition: background-color 1s, width 0.5s ease-out;     
        }     
        #block:hover {     
            background-color: red;     
            width: 600px;     
        }     
    </style>
</head>
<body>
    <p id="block">

    </p>
</body>
</html>

ログイン後にコピー

transitionDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TransitionDemo</title>
    <style>
        #wrapper {     
            width: 1024px;     
            margin: 0 auto;     
        }     
        .progress-bar-bg {     
            width: 960px;     
            /*background-color: aliceblue;*/     
            background-color: lightyellow;     
        }     
        .progress-bar {     
            height: 40px;     
            width: 40px;     
            background-color: #69C;     

            border: 1px solid lightyellow;     
            border-radius: 5px;     
        }     
        .progress-bar:hover {     
            width: 960px;     
        }     

        #bar1 {     
            -webkit-transition: width 5s linear;     
            /*-webkit-transition: width 5s steps(6, end);*/     
            /*-webkit-transition: width 5s step-start;*/     
        }     
        #bar2 {     
            -webkit-transition: width 5s ease;     
        }     
        #bar3 {     
            -webkit-transition: width 5s ease-in;     
        }     
        #bar4 {     
            -webkit-transition: width 5s ease-out;     
        }     
        #bar5 {     
            -webkit-transition: width 5s ease-in-out;     
        }     
    </style>
</head>
<body>
<p id="wrapper">
    <p>linear</p>
    <p class="progress-bar-bg">
        <p class="progress-bar" id="bar1"></p>
    </p>

    <p>ease</p>
    <p class="progress-bar" id="bar2"></p>

    <p>ease-in</p>
    <p class="progress-bar" id="bar3"></p>

    <p>ease-out</p>
    <p class="progress-bar" id="bar4"></p>

    <p>ease-in-out</p>
    <p class="progress-bar" id="bar5"></p>
</p>
</body>
</html>

ログイン後にコピー

結果分析: マウス上に移動した後、トランジションアニメーションが発生します。

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。

以上がCSS3トランジションエフェクトの使用例の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。