簡単なチュートリアル
これは、非常にクリエイティブな純粋な 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 サイト (m.sbmmt.com) をご覧ください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
