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;}
}

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 ]

Bagikan