CSS3 は Apple コンピュータの DOCK メニューバーを実装します_html/css

CSS3 は Apple コンピュータの DOCK メニューバーを実装します_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:29:35

オリジナル

1488 人が閲覧しました

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 、皆さんも拡散と共有を歓迎します。