Html ve Css İle Yatay Animasyonlu Menü-14 - Bilişim Konuları

Html ve Css İle Yatay Animasyonlu Menü-14

Yine değişik css ile yapılmış başka bir menü örneği. Bu menü örneğimizde yatay olarak bir menü tasarlanmıştır. Fare ile menü elemanları üzerine geldiğinde soldan sağa doğru bir çizgi meydana gelmektedir. Menünün kodları css ve html olarak aşağıdaki gibidir. Kodlar üzerinde değişiklik yaparak kullanabilirsiniz. Sayfanın altında menünün çalışan dosyası bulunmaktadır. Buradan dosyayı indirebilirsiniz.

Css Kodları:

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Oswald:500');
.back{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:url(https://pp.userapi.com/c841122/v841122831/327e/nHt-92F6yc4.jpg) no-repeat top center #efeff1;
  background-size:cover;
}
.thx{
  position: fixed;
  left:50%;
  transform:translateX(-50%);
  bottom: 15px;
}
nav{
  width: 100%;
  position: fixed;
  top:50px;
  text-align:center;
}
nav a{
  font-family: 'Oswald', sans-serif;
  font-weight:500;
  text-transform:uppercase;
  text-decoration:none;
  color:#16151b;
  margin:0 15px;
  font-size:16px;
  letter-spacing:1px;
  position:relative;
  display:inline-block;
}
nav a:before{
  content:'';
  position: absolute;
  width: 100%;
  height: 3px;
  background:#16151b;
  top:47%;
  animation:out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
nav a:hover:before{
  animation:in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;

}
@keyframes in{
  0%{
    width: 0;
    left:0;
    right:auto;
  }
  100%{
    left:0;
    right:auto;
    width: 100%;
  }
}
@keyframes out{
  0%{
    width:100%;
    left: auto;
    right: 0;
  }
  100%{
    width: 0;
    left: auto;
    right: 0;
  }
}
@keyframes show{
  0%{
    opacity:0;
    transform:translateY(-10px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@for $i from 1 through 5 {
  nav a:nth-child(#{$i}){
    animation:show .2s #{$i*0.1+1}s ease 1 both;
  }
}  
</style>

Html Kodları:

<body>
<div class="back"></div>
<nav>
  <a href="#">Hakkında</a>
  <a href="#">Çalışmalar</a>
  <a href="#">Ortaklar</a>
  <a href="#">Fiyat</a>
  <a href="#">İletişim</a>
</nav>
</body>

Buradan İndirebilirsiniz.

Bu Yazıya Tepkin Nedir?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Yorum Yap