Cara membuat Efek tulisan membesar dan mengecil lalu berputar dengan CSS3
Apakabar sahabat Kediri Blogger,,kami akan membahas tentang cara membuat efek tulisan membesar lalu mengecil dengan berputar....ini cocok untuk template animasi dan kita langsung saja ke TKP
Langkah pertama:
1.Buka akun Blog anda
2.masuk ke Template Klik EDIT HTML
3.Cari kode ]]></b:skin> biar cepat menjarinya tekan F3 kalau kode tersebut sudah ketemu letakkan scrip di bawah ini tepat di atas kode ]]></b:skin>
.textanimasi3{
text-align:center;
letter-spacing:-.08em;
color:#E51D66;
font:700 9.4em helvetica, sans-serif;
text-shadow: 0px 0px 0px #ddd, 0x 0px 0px #ddd;
-webkit-animation:text1 10s linear infinite;
-moz-animation:text1 10s linear infinite;
height: 100px;
}
@-webkit-keyframes text1 {
0% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif; }
25% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
50% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
75% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
100% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
}
@-moz-keyframes text1 {
0% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif; }
25% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
50% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
75% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
100% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
}
text-align:center;
letter-spacing:-.08em;
color:#E51D66;
font:700 9.4em helvetica, sans-serif;
text-shadow: 0px 0px 0px #ddd, 0x 0px 0px #ddd;
-webkit-animation:text1 10s linear infinite;
-moz-animation:text1 10s linear infinite;
height: 100px;
}
@-webkit-keyframes text1 {
0% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif; }
25% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
50% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
75% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
100% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
}
@-moz-keyframes text1 {
0% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif; }
25% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
50% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
75% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
100% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
}
Lalu kalian simpan
langkah ke:
4. Copy kode di bawah ini di tambah gadget klik HTML/JavaScrip lalu simpan
<div class="textanimasi3">Kediri Blogger</div>
Warna biru bisa kalian rubah sesuka kalian
Sekian danterimakasih telah meluangkan waktu anda melihat artikel saya,semoga bermanfaat.
Artikel Terkait
Widget by [ Kediri Blogger ]
wah.. tapi sejauh ini CSS3 masih terkesan bikin lambat e.. :(
Artikel yang bermanfaat :D
ijin bookmark dulu sob
BlogWalking ^_^
Sip mantaaabbb ane coba kok belum bisa ya..
oke gpp follo saya http://burhanefendi.blogspot.com/
bagus gankeren