Membuat Menu Cantik Effect Sonar

Membuat Menu Cantik Effect Sonar - Kali ini saya akan berbagi satu efek tautan yang menurut saya sangat indah dengan menggunakan bantuan CSS. Idenya adalah dengan menggunakan pulsate-elemen yang nantinya akan menciptakan efek halus dan modern layaknya sonar. Dalam contoh ini kita menggunakan transisi hover, sehingga effect sonar-nya akan terasa hidup.

Tampilannya bisa dilihat seperti dibawah ini :

Dan untuk lebih jelasnya bisa lihat disini Live Demo

Artikel terkait Kumpulan Jenis Style Blockquote Cantik dan Simpel

Untuk menggunakannya buat tag HTML dengan menyertakan tag anchors, sebagai contoh seperti dibawah ini :

HTML

<center>
<ul class="sonarmenu">
<li><a href="http://hanyalah-demo-saja.blogspot.co.id/2016/04/demo-css3-sonar-menu.html">Home</a></li>
<li><a href="http://hanyalah-demo-saja.blogspot.co.id/2016/04/demo-css3-sonar-menu.html">Tools</a></li>
<li><a href="http://www.hanyapedia.com">CSS</a></li>
<li><a href="http://hanyalah-demo-saja.blogspot.co.id/2016/04/demo-css3-sonar-menu.html">Download</a></li>
<li><a href="http://hanyalah-demo-saja.blogspot.co.id/2016/04/demo-css3-sonar-menu.html">Sitemap</a></li>
</ul>
</center>

Dalam kasus dibawah ini saya menggunakan jenis huruf dari Google Fonts, sehingga saya menyertakan link eksternal font css.

<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400' rel='stylesheet' type='text/css'>

Berikutnya gunakan / copy kode CSS dibawah ini di CSS Selector blog anda :

<style>
ul.sonarmenu{ 
 list-style: none;
}
ul.sonarmenu li{
 display: inline;
}

ul.sonarmenu a{
 position: relative;
 display: inline-block;
 color: black; /* font color */
 text-decoration: none;
 margin: 10px 20px;
 text-transform: none;
 font-family: 'Dancing Script', sans-serif; /* font style (uses Google fonts) */
 font-size: 32px; /* font size */
 letter-spacing: 2px; /* letter spacing */
 border-bottom: 2px solid transparent; /* Bottom border style */
}
ul.sonarmenu a:hover, ul.sonarmenu a:focus{
 outline: none;
 border-bottom: 2px solid #EEE; /* Bottom border style on hover */
}
ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */
 position: absolute;
 top: 50%;
 left: 50%;
 width: 70px; /* width of outer circle */
 height: 70px; /* height of outer circle */
 border: 12px double rgba(0,0,0,0.1); /* style and color of circles */
 border-radius: 50%;
 content: '';
 opacity: 0;
 -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
 -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
 transform: translateX(-50%) translateY(-50%) scale(0.2);
}

ul.sonarmenu a:after{ /* inner circle specific CSS */
 width: 60px; /* width of inner circle */
 height: 60px; /* width of inner circle */
 border-width: 6px;
 -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
 -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
 transform: translateX(-50%) translateY(-50%) scale(0.8);
}

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
 -webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */
 -moz-animation: pulsate 1.2s infinite;
 -ms-animation: pulsate 1.2s infinite;
 animation: pulsate 1.2s infinite;
}

/* ### Keyframe animations ### */

@-webkit-keyframes pulsate{
  30%{
 opacity: 1;
 -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  }
 100%{
 opacity: 0.3;
 -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
 }
}

@-moz-keyframes pulsate{
  30%{
 opacity: 1;
 -moz-transform: translateX(-50%) translateY(-50%) scale(1);
  }
 100%{
 opacity: 0.3;
 -moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
 }
}

@-ms-keyframes pulsate{
  30%{
 opacity: 1;
 -ms-transform: translateX(-50%) translateY(-50%) scale(1);
  }
 100%{
 opacity: 0.3;
 -ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
 }
}

@-keyframes pulsate{
  30%{
 opacity: 1;
 transform: translateX(-50%) translateY(-50%) scale(1);
  }

 100%{
 opacity: 0.3;
 transform: translateX(-50%) translateY(-50%) scale(0.5);
 }
}

</style>

Lihat kembali disini untuk Live Demo

Demikian artikel singkat tentang Membuat Menu Cantik Effect Sonar, jika bermanfaat maka silahkan klik tautan social share dibawah ini.

Credit :
dynamicdrive.com