- Back to Home »
- CSS Tricks »
- Cara Membuat Animasi Sharingan Berputar
Posted by : Boyz
Senin, 22 April 2013
Cara Pemakaian :
1. Buka Blogger, Lalu pilih Template lalu klik Edit HTML! Jangan lupa untuk mencentang Expand Template Widget
1. Buka Blogger, Lalu pilih Template lalu klik Edit HTML! Jangan lupa untuk mencentang Expand Template Widget
2. Cari kode <div id='header-wrapper'> atau <div id="header-wrapper"> || jika tidak ada keduanya! berarti template anda telah dimodifikasi oleh pengguna template sebelumnya!
3. Sisipkan kode berikut tepat di bawah kode <div id='header-wrapper'> atau <div id="header-wrapper"> :
<div id='WAKsharingan1'><div class='WAKsharingan'/></div>
<div id='WAKsharingan1'><div class='WAKsharingan'/></div>
4. Lalu cari kode ]]></b:skin> dan sisipkan kode berikut tepat di atas kode tadi :
/* WAKSharingan */
.WAKsharingan1 { -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear;margin-top:-60px; margin-left:800px;position:absolute;z-index:999;height: 200px; line-height: 46px;border-radius:500px;border-left:10px solid black;border-right:10px solid black;width: 200px;; -moz-animation:WAKspin 1s infinite linear; -webkit-animation:WAKspin 1s infinite linear;animation:WAKspin 1s infinite linear}
.WAKsharingan {margin-top:-60px; margin-left:800px;position:absolute;z-index:999;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9cDw8oqFmYc1S3uDZLuEYhlttk34S4UzN4vxwRYQlL32vwzeEmDHyvpSSZ6ler15LbwIbh0n5mOyUG7RfaMrDGewVmXL_k89NTfHxX-y-TCb7yT6BQxsDmo1uN3ZA-IdLM8V9d3Mj5MPu/s185/supers.png) no-repeat;height: 185px; line-height: 46px;border-left:20px solid black;border-radius:500px;border-right:20px solid black;width: 185px; -moz-animation:WAKspin 1s infinite linear; -webkit-animation:WAKspin 1s infinite linear;animation:WAKspin 1s infinite linear}
@-moz-keyframes WAKspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
@-webkit-keyframes WAKspin {0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }
@keyframes WAKspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
.WAKsharingan1 { -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear;margin-top:-60px; margin-left:800px;position:absolute;z-index:999;height: 200px; line-height: 46px;border-radius:500px;border-left:10px solid black;border-right:10px solid black;width: 200px;; -moz-animation:WAKspin 1s infinite linear; -webkit-animation:WAKspin 1s infinite linear;animation:WAKspin 1s infinite linear}
.WAKsharingan {margin-top:-60px; margin-left:800px;position:absolute;z-index:999;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9cDw8oqFmYc1S3uDZLuEYhlttk34S4UzN4vxwRYQlL32vwzeEmDHyvpSSZ6ler15LbwIbh0n5mOyUG7RfaMrDGewVmXL_k89NTfHxX-y-TCb7yT6BQxsDmo1uN3ZA-IdLM8V9d3Mj5MPu/s185/supers.png) no-repeat;height: 185px; line-height: 46px;border-left:20px solid black;border-radius:500px;border-right:20px solid black;width: 185px; -moz-animation:WAKspin 1s infinite linear; -webkit-animation:WAKspin 1s infinite linear;animation:WAKspin 1s infinite linear}
@-moz-keyframes WAKspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
@-webkit-keyframes WAKspin {0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }
@keyframes WAKspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
5. Klik OK dan selesailah!
NB :
Jika template berantakan, anda bisa mengatur margin yang saya beri warna biru!
Untuk preview, Klik di sini!
Jika template berantakan, anda bisa mengatur margin yang saya beri warna biru!
Untuk preview, Klik di sini!
bang...
BalasHapusklu header-wrapper gk ad gantinya ap ya..
template bawaan blogger gk ad header-wrappernya..
visit n comment back..
http://kiritoblogs.blogspot.com/