六角ボタンの特殊効果を実現する方法

今回は、六角ボタンの特殊効果を実装する方法と、六角ボタンの特殊効果を実現するための注意点を説明します。以下は実際のケースです。

コード解釈

domを定義します。コンテナにはボタンが1つだけ含まれます:

<nav>
    <ul>
        <li>Home</li>
    </ul>
</nav>

ボタンのスタイルを定義します:

nav {
    --h: 3em;
}
nav ul {
    padding: 0;
}
nav ul li {
    list-style-type: none;
    width: calc(var(--h) * 1.732);
    height: var(--h);
    background-color: #333;
    color: white;
    font-family: sans-serif;
    text-align: center;
    line-height: var(--h);
}

疑似要素を含む傾いた長方形を2つ追加します:

nav ul li {
    position: relative;
}
nav ul li::before,
nav ul li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-color: #333;
}
nav ul li::before{
    transform: rotate(60deg) translateX(calc(var(--h) * -2));
}
nav ul li::after{
    transform: rotate(-60deg) translateX(calc(var(--h) * 2));
}

マウスオーバー効果を追加します:

nav ul li::before,
nav ul li::after {
    z-index: -1;
    filter: opacity(0);
    transition: 0.3s;
}
nav ul li:hover::before {
    filter: opacity(1);
    transform: rotate(60deg) translateX(0);
}
nav ul li:hover::after {
    filter: opacity(1);
    transform: rotate(-60deg) translateX(0);
}

dom いくつかのボタンを追加しますボタンのグループを形成するには:

<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>

マウスオーバー効果のためにボタンの間に余白を残します:

nav ul li {
    margin: 2em;
}

さらに 2 つのボタン グループを追加します:

<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>

    

        
Home
        
Product Vs
        
Services
        
Contact
    

最後に、いくつかの変更を試してください:

nav {
    --h: 3em;
}
nav:nth-child(1) {
    --rate: 1.5;
    --bgcolor: black;
}
nav:nth-child(2) {
    --rate: 1.732;
    --bgcolor: brown;
}
nav:nth-child(3) {
    --rate: 2;
    --bgcolor: green;
}
nav ul li {
    width: calc(var(--h) * var(--rate));
    background-color: var(--bgcolor);
}
nav ul li::before,
nav ul li::after {
    background-color: var(--bgcolor);
}

これで完了です。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSカルーセル滞在効果を実装する手順の詳細な説明

Linuxバックグラウンド実行ノードサービス命令ステップメソッド

以上が六角ボタンの特殊効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。