CSS3でトランジションアニメーション効果を実現するにはどうすればよいですか? CSS3トランジションエフェクトの実装方法

不言
リリース: 2018-09-12 14:24:25
オリジナル
4868 人が閲覧しました

ウェブページ上で、特定のテキストや画像にマウスを置くと、このような変化が起こることがあります。これは、実際には比較的抽象的なものです。トランジションアニメーション効果を実現するcss3について

Css3 トランジションはトランジション属性と切り離すことができません。トランジションは、Web ページ上の段階的なトランジション効果をトランジション アニメーションと呼びます。

それでは、CSS3 のトランジション属性がトランジション効果を具体的にどのように実装しているかを見てみましょう。

まず、トランジション属性の定義と使用法を見てみましょう:

トランジション属性は、4 つのトランジション属性を設定するために使用される短縮属性です。

transition-property: トランジション効果を設定する CSS プロパティの名前を指定します。

transition-duration: トランジション効果が完了するまでにかかる秒数またはミリ秒数を指定します。

transition-timing-function: スピードエフェクトのスピードカーブを指定します。

transition-lay: トランジション効果がいつ開始されるかを定義します。

transition 属性の定義と使用法についての簡単な説明を読んだ後。

次に、トランジション効果を実装する CSS3 コードを詳しく見てみましょう:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小效果</title>
    <style type="text/css">
        /*通配符重置浏览器默认的两个值,
        对本文没有太大影响,不知道可以无视*/
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 400px;
            height: 100px;
            padding-top: 20px;
            line-height: 100px;
            margin:200px auto 0;
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            font-family: "华文行楷";
            background: #000;
            color:#F60;
    transition-property: all;/*变化的东西。all是所有*/
    transition-duration: 1s;/*变化过程的时间*/
    transition-timing-function: linear;/*linear是匀速变化*/
    transition-delay: 0s;/*没有延迟变化*/
    /*下面的是简写属性*/
    /*
        transition:all 1s linear 0s;
    */
        }
        .div1:hover{
            text-shadow: 0px 0px 2px #fff,
                    0px -3px 3px #1EB,
                    0px -6px 4px #01DEFD,
                    0px -9px 5px #0BF,
                    0px -12px 6px #08F;
        }
    </style>
</head>
<body>
    <div>PHP中文网火焰字</div>
</body>
</html>
ログイン後にコピー

最後に、CSS3 トランジション効果を見てみましょう:

css3 でトランジション効果プロセスを実装します:

CSS3でトランジションアニメーション効果を実現するにはどうすればよいですか? CSS3トランジションエフェクトの実装方法

トランジション効果を実装するための css3 結果:

CSS3でトランジションアニメーション効果を実現するにはどうすればよいですか? CSS3トランジションエフェクトの実装方法

トランジション属性の詳しい使用方法については、css3 学習マニュアル を参照してください。

関連する推奨事項:

CSS3 アニメーションを使用して 3D 画像のトランジション効果を実現する_html/css_WEB-ITnose

トランジション属性を使用してトランジション効果を実現する CSS3 について

以上がCSS3でトランジションアニメーション効果を実現するにはどうすればよいですか? CSS3トランジションエフェクトの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート