Membuat efek Sonar di blog

Membuat efek Sonar di blog

  18 April    Andika

---

Kali ini Saya akan berbagi cara membuat efek Sonar pada link saat tersentuh mouse (hover).

Untuk membentuk Sonar, pada CSS digunakan Border Radius hingga 50% serta Border "double". Sementara untuk animasinya, keyframe CSS3 lah digunakan untuk menghidupkan skala sonar (melalui CSS3 transform). Sehingga saat tersentuh mouse akan ada efek berdenyut.

Berikut Demonya,



Jika kamu tertarik untuk mencoba, berikut kode CSSnya

ul.sonarmenu {
    list-style:none;
}
ul.sonarmenu li {
    display:inline;
}
ul.sonarmenu a {
    position:relative;
    display:inline-block;
    color:black;
    text-decoration:none;
    margin:10px 20px;
    text-transform:uppercase;
    font-size:22px;
    letter-spacing:2px;
    border-bottom:2px solid transparent;
}
ul.sonarmenu a:hover,
ul.sonarmenu a:focus {
    outline:none;
    border-bottom:2px solid #eee;
}
ul.sonarmenu a::before,
ul.sonarmenu a:after {
    position:absolute;
    top:50%;
    left:50%;
    width:70px;
    height:70px;
    border:12px double rgba(0,0,0,0.1);
    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 {
    width:60px;height:60px;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;
    -moz-animation:pulsate 1.2s infinite;
    -ms-animation:pulsate 1.2s infinite;
    animation:pulsate 1.2s infinite;
}
@-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);
    }
}

Sementara untuk kode HTMLnya, berikut cara penulisannya

<ul class="sonarmenu">
    <li><a href="http://cara-ngeblog-di.blogspot.com">Beranda</a></li>
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
    <li><a href="#">Test 4</a></li>
</ul>

Catatan

Efek sonar ini bekerja di IE 10 keatas dan semua versi terbaru dari browser Firefox dan Chrome, Namun ini tidak bekerja pada browser Safari.