純粋な CSS3 クリエイティブ ナビゲーション メニュー効果

簡単なチュートリアル

これは、非常にクリエイティブな純粋な CSS3 ナビゲーション メニュー効果です。このナビゲーション メニューでは、主に CSS3 の変換メソッドとトランジション メソッドを使用して効果を実現していますが、これは非常にシンプルです。この特殊効果は Attack of the Sun によって提供されます。

HTML 構造の使用方法

ナビゲーション メニューは、順序なしリストをラップするために

要素を使用します。

<nav>
  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Demos</a></li>
      <li><a href="#">中文</a></li>
  </ul>
</nav>

CSS スタイル

このナビゲーション メニューのメニュー項目上でマウスをスライドすると、メニュー項目にはわずかに傾くアニメーションがあり、メニュー項目の上下に 2 本の線がスライドします。メニュー項目の傾きアニメーションは、transform 属性を使用して、メニュー項目がマウスでロールオーバーされたときにハイパーリンク要素を回転および拡大縮小します。

li a {
    display: block;
    font-size: 20px;
    text-align: center;
    padding: 10px 15px;
}
 
li a:hover {
    transform: rotate(5deg) scale(1.1);
}

メニュー項目の上部と下部の行は、ハイパーリンク要素の :before および :after 擬似要素を使用して作成されます。これらは透明度 0、幅 0 から始まり、transform プロパティを使用して回転および移動します。

li a:before, li a:after {
    opacity: 0;
    border-top: 1px solid white;
    content: '';
    display: block;
    position: relative;
    z-index: -1;
    margin: auto;
    width: 0px;
}
 
li a:before {
    top: 0px;
    transform: rotate(120deg) translateY(-50%) translateX(-50%);
}
 
li a:after {
    top: 5px;
    transform: rotate(-60deg) translateY(-50%) translateX(-50%);
}

マウスオーバーすると、透明度が 1 に変更され、幅が 20 ピクセルに設定され、イージング効果によるスムーズな移行が行われます。

li a:hover:before, li a:hover:after{
    transition: all 0.3s ease;
    opacity: 1;
    width: 20px;
}

上記は純粋な CSS3 クリエイティブ ナビゲーション メニューの特殊効果の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。