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

Hover Menu Reveal Effect CSS3は画面をホバーするとナビゲーションメニューを表示する。
<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>
.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); }