CSS3 Transition スムーズトランジションメニューバーの実装-CSSチュートリアル-php.cn

CSS3 Transition スムーズトランジションメニューバーの実装

php中世界最好的语言

リリース： 2018-03-21 13:25:51

オリジナル

2545 人が閲覧しました

今回は CSS3 の Transition スムーズトランジションメニューバーの実装についてお届けします。 Transition スムーズトランジションメニューバーを実装する際の注意点は何ですか? ここで実際の事例を見てみましょう。

CSS3 アニメーションの 3 つの主要なプロパティ (Transform、Transition、Animation) を以下に紹介します。 transition プロパティは、transition-property、transition-duration、transition-timing-function、transition-delay の 4 つのプロパティを備えた短縮プロパティです。

構文

transition: property duration timing-function delay;

ログイン後にコピー

属性:

値説明transition-property CSS属性、トランジション効果の名前を指定します移行期間必須トランジション効果の完了にかかる秒数またはミリ秒を指定しますtransition-timing-functionトランジション効果の速度曲線を指定しますtransition-delayトランジション効果の開始時期を定義します

以下にケースを示します

まずレンダリングを見てください:

CSS3 Transition スムーズトランジションメニューバーの実装

原理図:

CSS3 Transition スムーズトランジションメニューバーの実装

マウスがメニューリストに移動したら、ホバースタイルを追加します。つまり、p.wrap の上限値を負の値に設定します。次に、transition 属性を使用して、スムーズな遷移を実現します。

完全なデモ

<!--html-->
<style>
 .menu{
        margin: 100px auto;
    }
    .menu ul li{
        float:left;
        width: 50px;
        height: 25px;
        background-color: #2aabd2;
        margin-right: 5px;
        line-height: 25px;
        position: relative;
        overflow: hidden;
    }
    .menu ul li a{
        display: block;
        height:25px;
        width: 50px;
        text-align: center;
        line-height: 25px;
        color: white;
    }
    .menu ul li .awrap{
        position: absolute;
        top:0;
        left: 0;
    }
    .menu ul li .awrap:hover{
        transition: all .3s ease-in;
        top:-25px;
    }
</style>
<p>
    </p>

ログイン後にコピー

                                 菜单
                                 菜单
                                 菜单
                                 菜单
                                 菜单

注: アイコンには Font Awesome というフォントアイコンが使用されています。詳しく知りたい場合は、Font Awesome を検索してください。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの記事にあるその他の関連事項にご注意ください。

推奨読書:

CSS3 での pointer-events の使用の詳細な説明

focus-within シームレスなカルーセル広告を作成するための CSS3 内の focus-within の使用の詳細な説明

以上がCSS3 Transition スムーズトランジションメニューバーの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。