CSS Loading blog dengan @keyframes - Nah daripada bengong ngak jelas ngliatin blog yang jarang posting ini mari kita semarakan dengan tutorial yang satu ini yaitu CSS Loading blog dengan @keyframes, merupakan salah satu keajaiban CSS yang dapat membuat blog kita lebih terlihat elegan.
Ciri-ciri tutorial ini adalah memberikan bayangan hitam/senyap ketika berpindah ke lain page dan awalan page untuk lebih jelasnya bisa lihat demonya klik pada link dibawah ini
Langsung saja kita menginjak kelangkah-langkah pembuatannya.
Pertama-tama marilah kita baca basmallah terlebih dahulu kemudian
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Back Up Template untuk berjaga-jaga apabila terjadi kesalahan dan setelah semua itu dilakukan mari kita ke
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Back Up Template untuk berjaga-jaga apabila terjadi kesalahan dan setelah semua itu dilakukan mari kita ke
Cari kode ]]></skin> jika kesulitan gunakan ctrl+f untuk mencarinya, setelah itu tempatkan kode dibawah ini diatasnya:
@keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@-moz-keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@-webkit-keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@keyframes
{
from{transform:translate(0px, 9000px)}
to{transform:translate(0px, 0px)}
}
@-moz-keyframes
{
from{-moz-transform:translate(0px, 9000px)}
to{-moz-transform:translate(0px, 0px)}
}
@-webkit-keyframes
{
from{-webkit-transform:translate(0px, 9000px)}
to{-webkit-transform:translate(0px, 0px)}
}
#header-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#content-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#main-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#sidebar-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,h4,h5,h6,a {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,h4,h5,h6,.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 8s;}
Langkah 2{
from{opacity:0;}
to{opacity:10;}
}
@-moz-keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@-webkit-keyframes myfirst
{
from{opacity:0;}
to{opacity:10;}
}
@keyframes
{
from{transform:translate(0px, 9000px)}
to{transform:translate(0px, 0px)}
}
@-moz-keyframes
{
from{-moz-transform:translate(0px, 9000px)}
to{-moz-transform:translate(0px, 0px)}
}
@-webkit-keyframes
{
from{-webkit-transform:translate(0px, 9000px)}
to{-webkit-transform:translate(0px, 0px)}
}
#header-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#content-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#main-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#sidebar-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,h4,h5,h6,a {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,h4,h5,h6,.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 8s;}
Simpan Template dan lihat hasilnya.
Keterangan
id-widget
| Animation | Time Load |
|---|---|---|
| #header-wrapper | myfirst | 5s |
| #content-wrapper | myfirst | 5s |
| #main-wrapper | myfirst | 5s |
| #sidebar-wrapper | myfirst | 5s |
ID-widget di atas hanya sebagian kalian bisa menambahkan dengan widget lain . Time loadadalah lama loading saat animasi bekerja dengan waktu yang di tentukan . kalian bisa menggantinya sesuai keinginan.
cara menambahkan cukup simpan properti css berikut dan ganti #id-widget dengan id template anda.
#id-widget {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
| Browser |
Animation
|
|---|---|
| Firefox | -moz-animation: myfirst 5s |
| Chrome | -webkit-animation: myfirst 5s/td> |
Semoga bermanfaat selamat mencoba dan semoga berhasil
thanks to .CSS.Tuts+
Posting Komentar