10 Efek Gila dengan CSS3 Border Transitions

Hallo Sobat Mafia Hacker. Kali ini saya akan membahas tentang "10 Efek Gila dengan CSS3 Border Transitions" . Bagaimana Sih Cara buatnya ??

• Oke Pertama" Login ke Blogger

• Lalu Masuk ke Template - EDIT HTML

• Cari Kode ]]></b:skin>

• Lalu Masukan kode dibawah ini diatas kode tersebut

body {
padding: 10px 0 0 10px;
}

a {
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100px;
height:100px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpyk_kTdWKpRZKuQcqcPvL4bGIXllBtbLCeErOIvBh9rvsfnfwg7OoSFMokOSj8BlMbeIFmJ4eOKohQXj3fdtX_6n5KYg_AIETSr7YwYKAyXSCYQp7BbTE7Gn9zH8IHk9PwLyIOVJk5zw/s1600/unduhan.gif);
background-repeat:no-repeat;
background-origin:border-box;
background-position:50% 50%;

border-width:50px;
border-color:rgba(0,0,0,0);

-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-ms-transition:0.5s ease;
-o-transition:0.5s ease;
transition:0.5s ease;
}

a:hover {
border-width:0;
border-color:rgba(0,0,0,0.5);
}

a.one {border-style:solid;}
a.two {border-style:dashed;}
a.san {border-style:dotted;}

a.yon {border:50px solid rgba(0,0,0,0.7);}
a.goo {border:50px dashed rgba(0,0,0,0.7);}
a.rok {border:50px dotted rgba(0,0,0,0.7);}
a.ryk {border:50px double rgba(0,0,0,0.7);}
a.yon:hover {border: 1px solid rgba(0,0,0,0.7);}
a.goo:hover {border: 1px dashed rgba(0,0,0,0.7);}
a.rok:hover {border: 1px dotted rgba(0,0,0,0.7);}
a.ryk:hover {border: 1px double rgba(0,0,0,0.7);}

a.x7,
a.x8,
a.x9 {
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
}
a.x7 {border:50px solid rgba(0,0,0,0.7);}
a.x8 {border:50px dashed rgba(0,0,0,0.7);}
a.x9 {border:50px dotted rgba(0,0,0,0.7);}
a.x7:hover {border: 1px solid rgba(0,0,0,0.7);}
a.x8:hover {border: 1px dashed rgba(0,0,0,0.7);}
a.x9:hover {border: 1px dotted rgba(0,0,0,0.7);}

• Lalu Masukan kode ini dibawah kode <body>

<a class="one" href="#"></a>
<a class="two" href="#"></a>
<a class="san" href="#"></a>
<br>
<a class="yon" href="#"></a>
<a class="goo" href="#"></a>
<a class="rok" href="#"></a>
<a class="ryk" href="#"></a>
<br>
<a class="x7" href="#"></a>
<a class="x8" href="#"></a>
<a class="x9" href="#"></a>