ホームページ > 記事 > ウェブフロントエンド > CSS3 は Apple コンピュータの DOCK メニュー バーを実装します_html/css_WEB-ITnose
Apple コンピュータを使用している友人は皆、デスクトップの下部にアプリケーションを保存するための列である DOCK があることを知っています。この列の効果の一部は非常に美しいものでもあります。そこで今日は、CSS3 を使用してこの原則を実装します
まず、DOCK 列構造を設計する必要があります。コードは次のとおりです
<ul> <li id="menu1"> <a href="#menu1"> 菜单一 </a> </li> <li id="menu2"> <a href="#menu2"> 菜单二 </a> </li> <li id="menu3"> <a href="#menu3"> 菜单三 </a> </li></ul>
次に、関連する表示効果 CSS コードを設定します
ul,li{ list-style: none;}ul{ margin: 0 auto; width: 600px; height: 300px; background-color: #ff3300; padding: 10px; display: flex; justify-content: center; align-items: flex-end;}li{ display: inline-block; margin: 5px;}li > a{ border: #eee 1px solid; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; color: #fff; text-decoration: none;}
なぜコードにすべてのコードがあるのですか? id がありますが、a タグ内の #id 名は何ですか? ここでは、クリック時にメニュー バーを選択する効果を実現するために :target 疑似クラスを使用します。
li > a:hover,ul > li:target a{ width: 100px; height: 100px;}ul > li:target{ position: relative; animation: anims 1.5s ease-out;}
ここでのアニメーションは、非常に単純な上下にジャンプするエフェクトです
@keyframes anims { 0%{ top:0; } 25%{ top:-20px; } 50%{ top:0; } 75%{ top:-20px; } 100%{ top:0; }}
次に、* 記号を使用して、ここでは疑似要素::after が使用されています。選択した後にこのスタイルを設定する必要があります。
ul > li:target:after{ position: absolute; content: "*"; color: #fff; width: 100%; text-align: center;}
これは DOCK メニュー バーです。これは最も基本的な原則であり、このページを美しくすることができます^_^。記事を転載する場合は、出典と対応するリンクを明記してください: http://www.wutongwei.com/front/infor_showone.tweb?id=186 、皆さんも拡散と共有を歓迎します。