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

今回は 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トランジション効果の開始時期を定義します以下にケースを示します

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

原理図:

マウスがメニューリストに移動したら、ホバースタイルを追加します。つまり、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 サイトの他の関連記事を参照してください。