Gyancode

A free library of HTML, CSS, JS

Search This Blog

Monday 9 January 2017

Navigation hover effects

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Navigation hover effects</title>
</head>
<style>

@-webkit-keyframes fill {
  0% {  width: 0%; height: 1px; }
  50% { width: 100%;height: 1px; }
  100% { width: 100%; height: 100%; background: #333; }
}
@-webkit-keyframes circle {
  0% { width: 1px;top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 1px; z-index: -1;    background: #eee; border-radius: 100%;}
  100% { background: #aaa; height: 5000%; width: 5000%; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 0; }
}
body {font-family:Verdana, Arial, Helvetica, sans-serif;padding: 0;margin: 0;}
small {font-size: 12px;color: rgba(0, 0, 0, 0.4);}
h1 {text-align: center;padding: 50px 0;font-weight: 800;margin: 0;letter-spacing: -1px; color: inherit; font-size: 40px;}
h2 {text-align: center;font-size: 30px;margin: 0;font-weight: 300;color: inherit;padding: 50px;}
.center { text-align: center;}
section {height: 100vh;}
nav {width: 80%;margin: 0 auto; background: #fff;padding: 50px 0; border-radius: 130px; border-bottom:2px #6d6a6a solid;}
nav ul {list-style: none;text-align: center;}
nav ul li { display: inline-block;}
nav ul li a { display: block;padding: 15px;text-decoration: none;color: #aaa;font-weight: 800;text-transform: uppercase; margin: 0 10px;}
nav ul li a,nav ul li a:after,nav ul li a:before { transition: all .5s;}
nav ul li a:hover { color: #555;}
nav.stroke ul li a,nav.fill ul li a { position: relative;}
nav.stroke ul li a:after,nav.fill ul li a:after { position: absolute; bottom: 0;left: 0; right: 0; margin: auto; width: 0%; content: '.'; color: transparent; background: #aaa; height: 1px;}
nav.stroke ul li a:hover:after { width: 100%;}
nav.fill ul li a { transition: all 2s;}
nav.fill ul li a:after { text-align: left;content: '.'; margin: 0;  opacity: 0;}
nav.fill ul li a:hover { color: #fff; z-index: 1;}
nav.fill ul li a:hover:after {z-index: -10;animation: fill 1s forwards;-webkit-animation: fill 1s forwards; -moz-animation: fill 1s forwards; opacity: 1;}
nav.circle ul li a {position: relative;overflow: hidden; z-index: 1;}
nav.circle ul li a:after {display: block;position: absolute;margin: 0;top: 0; bottom: 0; left: 0;right: 0; content: '.'; color: transparent; width: 1px;  height: 1px; border-radius: 50%; background: transparent;}
nav.circle ul li a:hover:after { -webkit-animation: circle 1.5s ease-in forwards;}
nav.shift ul li a {position:relative;z-index: 1;}
nav.shift ul li a:hover {color: #91640F;}
nav.shift ul li a:after {display: block;position: absolute; top: 0;left: 0; bottom: 0;right: 0; margin: auto; width: 100%;height: 1px;content: '.'; color: transparent;background: #F1C40F;visibility: none;opacity: 0;z-index: -1;}
nav.shift ul li a:hover:after {opacity: 1;visibility: visible; height: 100%;}

</style>
<body>
<div class="container">

<section style="background: #3498db; color: #fff;">
  <h1>Beautiful navigation hover effects</h1>
  <p class="center">Scroll down to see some effects in action</p>
</section>
<section style="background: #e74c3c; color: #fff;">
  <h2>Underline Stroke</h2>
  <nav class="stroke">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">More</a></li>
      <li><a href="#">Nice staff</a></li>
    </ul>
  </nav>
</section>
<section style="background: #2ecc71; color: rgba(0, 0, 0, 0.5);">
  <h2>Underline Fill</h2>
  <nav class="fill">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">More</a></li>
      <li><a href="#">Nice staff</a></li>
    </ul>
  </nav>
</section>
<section style="background: #f1c40f; color: rgba(0, 0, 0, 0.5);">
  <h2>Shift</h2>
  <nav class="shift">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">More</a></li>
      <li><a href="#">Nice staff</a></li>
    </ul>
  </nav>
</section> 
</body>
</html>











Live Demo

No comments :

Post a Comment