Beranda » Wordpress » CSS3 Animasi Nav Menu Radial Cross Browser

CSS3 Animasi Nav Menu Radial Cross Browser

Ditulis oleh: -

Code CSS


/* ================================================================
radial menu by: http://belajar-wordpress.com
=================================================================== */
ul.radial, ul.radial ul {padding:0; margin:0; list-style:none;}
ul.radial {width:80px; height:80px; position:relative; z-index:100; margin:200px auto;}
ul.radial > li > a {display:block; width:80px; height:80px; background:#ddd; border-radius:80px; overflow:hidden text-align:center;
background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
background-image: -o-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
background-image: radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}
ul.radial ul {position:absolute; left:0; top:0; z-index:-1; width:80px; height:80px;}
ul.radial ul li {width:0; height:1px; position:absolute; left:50%; top:50%; background:#ddd; border-left:0px solid #ddd;
-webkit-transform-origin:0px 0px;
-moz-transform-origin:0px 0px;
-ms-transform-origin:0px 0px;
-o-transform-origin:0px 0px;
transform-origin:0px 0px;
}
ul.radial ul li a {display:block; width:50px; height:50px; position:absolute; left:-25px; top:-25px; border-radius:50px; color:#fff; background:#ddd; overflow:hidden; text-align:center;
background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
background-image: -o-radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
background-image: radial-gradient(circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}
ul.radial li a img {border:0; position:absolute; top:50%; left:50%; margin-top:-24px; margin-left:-24px;}
 
ul.radial ul li:nth-child(1) {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: 0.5s 1.75s;
-moz-transition: 0.5s 1.75s;
-ms-transition: 0.5s 1.75s;
-o-transition: 0.5s 1.75s;
transition: 0.5s 1.75s;
}
ul.radial ul li:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: 0.5s 1.5s;
-moz-transition: 0.5s 1.5s;
-ms-transition: 0.5s 1.5s;
-o-transition: 0.5s 1.5s;
transition: 0.5s 1.5s;
}
ul.radial ul li:nth-child(3) {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s 1.25s;
-moz-transition: 0.5s 1.25s;
-ms-transition: 0.5s 1.25s;
-o-transition: 0.5s 1.25s;
transition: 0.5s 1.25s;
}
ul.radial ul li:nth-child(4) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.5s 1s;
-moz-transition: 0.5s 1s;
-ms-transition: 0.5s 1s;
-o-transition: 0.5s 1s;
transition: 0.5s 1s;
}
ul.radial ul li:nth-child(5) {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 0.5s 0.75s;
-moz-transition: 0.5s 0.75s;
-ms-transition: 0.5s 0.75s;
-o-transition: 0.5s 0.75s;
transition: 0.5s 0.75s;
}
ul.radial ul li:nth-child(6) {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: 0.5s 0.5s;
-moz-transition: 0.5s 0.5s;
-ms-transition: 0.5s 0.5s;
-o-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
ul.radial ul li:nth-child(7) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
ul.radial ul li:nth-child(8) {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
 
ul.radial ul li:nth-child(1) a {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 0.5s 1.75s;
-moz-transition: 0.5s 1.75s;
-ms-transition: 0.5s 1.75s;
-o-transition: 0.5s 1.75s;
transition: 0.5s 1.75s;
}
ul.radial ul li:nth-child(2) a {
-webkit-transform: rotate45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.5s 1.5s;
-moz-transition: 0.5s 1.5s;
-ms-transition: 0.5s 1.5s;
-o-transition: 0.5s 1.5s;
transition: 0.5s 1.5s;
}
ul.radial ul li:nth-child(3) a {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s 1.25s;
-moz-transition: 0.5s 1.25s;
-ms-transition: 0.5s 1.25s;
-o-transition: 0.5s 1.25s;
transition: 0.5s 1.25s;
}
ul.radial ul li:nth-child(4) a {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: 0.5s 1s;
-moz-transition: 0.5s 1s;
-ms-transition: 0.5s 1s;
-o-transition: 0.5s 1s;
transition: 0.5s 1s;
}
ul.radial ul li:nth-child(5) a {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: 0.5s 0.75s;
-moz-transition: 0.5s 0.75s;
-ms-transition: 0.5s 0.75s;
-o-transition: 0.5s 0.75s;
transition: 0.5s 0.75s;
}
ul.radial ul li:nth-child(6) a {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: 0.5s 0.5s;
-moz-transition: 0.5s 0.5s;
-ms-transition: 0.5s 0.5s;
-o-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
ul.radial ul li:nth-child(7) a {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
ul.radial ul li:nth-child(8) a {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
-ms-transform: rotate(-225deg);
-o-transform: rotate(-225deg);
transform: rotate(-225deg);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
 
ul.radial li:hover ul {width:300px; height:300px; left:-110px; top:-110px;}
 
ul.radial li:hover ul li:nth-child(1) {border-left-width:150px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul.radial li:hover ul li:nth-child(2) {border-left-width:170px;
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
ul.radial li:hover ul li:nth-child(3) {border-left-width:160px;
-webkit-transition: 0.5s 0.5s;
-moz-transition: 0.5s 0.5s;
-ms-transition: 0.5s 0.5s;
-o-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
ul.radial li:hover ul li:nth-child(4) {border-left-width:90px;
-webkit-transition: 0.5s 0.75s;
-moz-transition: 0.5s 0.75s;
-ms-transition: 0.5s 0.75s;
-o-transition: 0.5s 0.75s;
transition: 0.5s 0.75s;
}
ul.radial li:hover ul li:nth-child(5) {border-left-width:170px;
-webkit-transition: 0.5s 1s;
-moz-transition: 0.5s 1s;
-ms-transition: 0.5s 1s;
-o-transition: 0.5s 1s;
transition: 0.5s 1s;
}
ul.radial li:hover ul li:nth-child(6) {border-left-width:110px;
-webkit-transition: 0.5s 1.25s;
-moz-transition: 0.5s 1.25s;
-ms-transition: 0.5s 1.25s;
-o-transition: 0.5s 1.25s;
transition: 0.5s 1.25s;
}
ul.radial li:hover ul li:nth-child(7) {border-left-width:140px;
-webkit-transition: 0.5s 1.5s;
-moz-transition: 0.5s 1.5s;
-ms-transition: 0.5s 1.5s;
-o-transition: 0.5s 1.5s;
transition: 0.5s 1.5s;
}
ul.radial li:hover ul li:nth-child(8) {border-left-width:85px;
-webkit-transition: 0.5s 1.75s;
-moz-transition: 0.5s 1.75s;
-ms-transition: 0.5s 1.75s;
-o-transition: 0.5s 1.75s;
transition: 0.5s 1.75s;
}
 
ul.radial li:hover ul li:nth-child(1) a {width:100px; height:100px; left:-50px; top:-50px; border-radius:100px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul.radial li:hover ul li:nth-child(2) a {width:80px; height:80px; left:-40px; top:-40px; border-radius:80px;
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
ul.radial li:hover ul li:nth-child(3) a {width:110px; height:110px; left:-55px; top:-55px; border-radius:110px;
-webkit-transition: 0.5s 0.5s;
-moz-transition: 0.5s 0.5s;
-ms-transition: 0.5s 0.5s;
-o-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
ul.radial li:hover ul li:nth-child(4) a {width:70px; height:70px; left:-35px; top:-35px; border-radius:70px;
-webkit-transition: 0.5s 0.75s;
-moz-transition: 0.5s 0.75s;
-ms-transition: 0.5s 0.75s;
-o-transition: 0.5s 0.75s;
transition: 0.5s 0.75s;
}
ul.radial li:hover ul li:nth-child(5) a {width:90px; height:90px; left:-45px; top:-45px; border-radius:90px;
-webkit-transition: 0.5s 1s;
-moz-transition: 0.5s 1s;
-ms-transition: 0.5s 1s;
-o-transition: 0.5s 1s;
transition: 0.5s 1s;
}
ul.radial li:hover ul li:nth-child(6) a {width:70px; height:70px; left:-35px; top:-35px; border-radius:70px;
-webkit-transition: 0.5s 1.25s;
-moz-transition: 0.5s 1.25s;
-ms-transition: 0.5s 1.25s;
-o-transition: 0.5s 1.25s;
transition: 0.5s 1.25s;
}
ul.radial li:hover ul li:nth-child(7) a {width:90px; height:90px; left:-45px; top:-45px; border-radius:90px;
-webkit-transition: 0.5s 1.5s;
-moz-transition: 0.5s 1.5s;
-ms-transition: 0.5s 1.5s;
-o-transition: 0.5s 1.5s;
transition: 0.5s 1.5s;
}
ul.radial li:hover ul li:nth-child(8) a {width:70px; height:70px; left:-35px; top:-35px; border-radius:70px;
-webkit-transition: 0.5s 1.75s;
-moz-transition: 0.5s 1.75s;
-ms-transition: 0.5s 1.75s;
-o-transition: 0.5s 1.75s;
transition: 0.5s 1.75s;
}
ul.radial > li:hover > a {background-color:#bbb;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
 
ul.radial li:hover ul li a:hover {background-color:#bbb;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
-o-transition: 0s;
transition: 0s;
}

Code HTML


<ul class="radial">
    <li><a href="http://belajar-wordpress.com"><img src="http://belajar-wordpress.com/wp-content/uploads/2012/12/r1.png" alt=""></a>
        <ul>
            <li><a href="http://belajar-wordpress.com"><img src="http://belajar-wordpress.com/wp-content/uploads/2012/12/r2.png" alt=""></a></li>
            <li><a href="http://belajar-wordpress.com"><img src="http://belajar-wordpress.com/wp-content/uploads/2012/12/r3.png" alt=""></a></li>
            <li><a href="http://belajar-wordpress.com"><img src="http://belajar-wordpress.com/wp-content/uploads/2012/12/r4.png" alt=""></a></li>
            <li><a href="http://belajar-wordpress.com"><img src="http://belajar-wordpress.com/wp-content/uploads/2012/12/r5.png" alt=""></a></li>
            <li><a href="http://belajar-wordpress.com"><img src="http://belajar-wordpress.com/wp-content/uploads/2012/12/r6.png" alt=""></a></li>
            <li><a href="http://belajar-wordpress.com"><img src="http://belajar-wordpress.com/wp-content/uploads/2012/12/r7.png" alt=""></a></li>
            <li><a href="http://belajar-wordpress.com"><img src="http://belajar-wordpress.com/wp-content/uploads/2012/12/r8.png" alt=""></a></li>
            <li><a href="http://belajar-wordpress.com"><img src="http://belajar-wordpress.com/wp-content/uploads/2012/12/r9.png" alt=""></a></li>
        </ul>
    </li>
</ul>

Source Belajar Wordpress

Artikel terkait :

3komentar:

  1. Unknown 125 Desember 2012 pukul 08.22

    coding tingkat dewa haha

    BalasHapus
    Balasan
    1. Kang Kapuk25 Desember 2012 pukul 08.27

      Co-Pas punya Budhe Safira, Fah....
      Mau ngebuktiin, kl bisa di pasang di blogspot...

      Hapus
    2. Unknown25 Desember 2012 pukul 09.29

      Ya bisa toh mas, selama ada CSS dan HTML nya :)

      Hapus