Membuat Efek Loading Blog dengan @KeyFrames
- Pertamax, masuk ke Edit HTML
- Keduax, cari dengan ctrl+f tulis ]]></b:skin>
- Masukkan kode berikut di atas kode ]]></b:skin>
SIMPAN TEMPLATE dan LIHAT HASILNYA!@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;}
Penjelasan
id-widget | Animation | Time Load |
---|---|---|
#header-wrapper | myfirst | 5s |
#content-wrapper | myfirst | 5s |
#main-wrapper | myfirst | 5s |
#sidebar-wrapper | myfirst | 5s |
cara menambahkan cukup simpan properti css berikut dan ganti #id-widget dengan id template anda.
Browser | Animation |
---|---|
Firefox | -moz-animation: myfirst 5s |
Chrome | -webkit-animation: myfirst 5s |
Chrome/safari dengan atribute -webkit- ,untuk browser Opera tinggal tambahkan awalan -o- jika animasi ini mendukung.
—
Tidak ada komentar:
Posting Komentar