Magicline Navigation を実装するための純粋な CSS (アニメーション ナビゲーション メニューに下線)_html/css_WEB-ITnose

他の人のウェブサイトを見ていたら、ナビゲーションメニューのアニメーションがとても面白かったので、よく勉強しました。

これまでに見たアニメーションには、水平下線アニメーション ナビゲーション、水平背景アニメーション ナビゲーション、垂直アニメーション ナビゲーションの 3 種類があります。それらの実装アイデアは同じであり、すべて同じレベルのユニバーサル セレクター「~」に依存しています。 CSS3の。

この記事では、私自身が実装したアイデアを簡単に記録します。

最初に最終的な効果を見てみましょう: クリックしてデモをご覧ください

実装アイデア

HTML 構造

HTML 構造は特別なものではありません、ul -> li:

<ul class="a">  <li class="n1"><a href="#">Navigator A</a></li>  <li class="n2"><a href="#">Navigator B</a></li>  <li class="n3 selected"><a href="#">Navigator C</a></li>  <li class="n4"><a href="#">Navigator D</a></li>  <li class="quebec"> </li></ul>

最後の li は空です後で使用します。

CSS レイアウト

基本的なスタイルを実装します。説明はあまりありません:

  li {      list-style: none outside;      position: relative;      z-index: 1;      float: left;      padding: 0 0 0 0;  }  li a {      position: relative;      top: 5px;      display: block;      margin: 0 0;      border-bottom: 5px solid transparent;      padding: 10px 0;      text-align: center;      text-decoration: none;  }  .selected a {      border-bottom: 5px solid #cfd0d0;      color: #340e56;  }

ナビゲーションの下線を実装します

アニメーション部分は以下に実装されています。

以下の紫色のスクロール バーは、先ほど残った最後の li 要素によって実現されます。

 .quebec {      position: absolute;      bottom: -5px;      left: 0;      z-index: 3;      margin: 0;      border: 0;      width: 5px;      height: 5px;      padding: 0;      overflow: hidden;      text-indent: -9999em;      background: #511d7f;      -webkit-transition-property: left, width;      -moz-transition-property: left, width;      -ms-transition-property: left, width;      -o-transition-property: left, width;      transition-property: left, width;      -webkit-transition-duration: .5s;      -moz-transition-duration: .5s;      -ms-transition-duration: .5s;      -o-transition-duration: .5s;      transition-duration: .5s;  }

絶対配置を使用して、最後の li.quebec をナビゲーションの下に配置し、幅と高さを設定します。左と幅を変更したときにアニメーションが実現されるようにトランジションを設定します。

モバイル

ナビゲーション上にマウスを移動すると、li.quebec がナビゲーションの左下に表示されます。この効果を実現するのは、CSS3 兄弟ユニバーサル セレクター「~」です

たとえば、A ~ B は、 A 要素の後の任意の兄弟 B 要素と一致します。

  .n1:hover ~ li.quebec { left: 0; width: 95px; }  .n2:hover ~ li.quebec { left: 100px; width: 95px; }  .n3:hover ~ li.quebec { left: 192px; width: 95px; }  .n4:hover ~ li.quebec { left: 285px; width: 95px; }

これは純粋な CSS の下線アニメーション ナビゲーションです。 最終効果: デモ ビュー

拡張機能

水平下線アニメーション ナビゲーションを実装した後、背景移動アニメーション ナビゲーションを実装します。アイデアは同じですが、li.quebec の高さと幅の変更と背景の変更です。透明性。

同じことが垂直アニメーションナビゲーションにも当てはまります。li.quebec の高さと幅を変更し、translateY を通じて垂直方向の位置を制御します。

効果をより眩しくするために、別の li にホバーしたときに li.quebec の色、背景、透明度などを変更することもできます。