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

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);
}
 
Hover Menu Reveal Effect CSS3

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

  • LATEST
  • RELATED
  • POPULAR