Cara Membuat Loading Blog Keren Dengan Keyframes

  1. Buka Blogger.com,Login Dengan Akun Anda
  2. Buka rancangan,Pilih Edit Html,Cari Kode ]]></b:skin> letakkan kode di bawah ini diatas kode  ]]></b:skin>
#wrapper, #sidebar {
-webkit-animation: css3Animasi 4s ease-in;
-moz-animation: css3Animasi 4s ease-in;
-ms-animation: css3Animasi 4s ease-in;
-o-animation: css3Animasi 4s ease-in;
animation: css3Animasi 4s ease-in
}
@-webkit-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@-moz-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@-ms-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@-o-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}

NB :Kode yang berwarna merah bisa anda ganti berdasarkan kode dari setiap elemen template mu 

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Situs Auto Visitors

Free Download | Warcraft 3 - Frozen Throne Maps | Naruto | Bleach | One piece | More ...

Cara Membuat Website Tools Social Point