CSS

【CSS】画面をホバーするとナビゲーションメニューを表示Hover Menu Reveal Effect CSS3

November 20, 2016

Hover Menu Reveal Effect CSS3は画面をホバーするとナビゲーションメニューを表示する。

HTML

    <nav class="layer">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

CSS

.layer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

/*  styling after hovered over the front layer  */
    transition: .4s;
    transform: perspective(800px) scale(1) translateX(0) rotateY(0);
    transform-style: preserve-3d;
}

nav {
    vertical-align: center;
}

nav ul {
    padding-left: 66.66%;
    font-size: larger;
    line-height: 2;
}

nav ul li {
    list-style-type: none;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
}

a:hover {
    text-decoration: line-through;
    color: #ffbfc3;
}

.front {
    background-color: #FFFBC1;
}


/*  animation  */

body:hover .front {
    transform: perspective(700px) scale(0.5) translateX(-16.66%) rotateY(25deg);
}

Download