Membuat Efek Animasi Loading Blog Dengan CSS3 Part 2

Membuat Efek Animasi Loading Blog Dengan CSS3 Part 2 - Yang sebelumnya saya share bagaimana cara membuat efek animasi loading blog dengan bentuk circle, nah kali ini saya mau share dalam bentuk bintang-bintang atau kunang-kunang... hehhe

ok simak ajah langsung codenya dibawah :

Sebaikknya anda membaca dengan baik langkah yang telah diberikan dan jangan lupa backup template anda

1. Login ke akun blogger anda
2. Klik Template » Edit HTML » Lanjutkan » Klik Expand Template Widget
3. Letakan kode CSS dibawah ini diatas kode ]]></b:skin>

.point2nd, .point3nd, .point4nd {
background-color:#2187e7;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);

width:3px;
height:3px;
border-radius:50px;
box-shadow:0 0 5px #00c6ff;

margin:0 auto;
}

.ball-arc2nd, .ball-arc3nd, .ball-arc4nd {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.point2nd { -moz-animation: ball-2ndy 2s infinite cubic-bezier(0, 0, 0.35, 1);
-webkit-animation: ball-2ndy 2s infinite cubic-bezier(0, 0, 0.35, 1); }
.point3nd { -moz-animation: ball-3ndy 2s infinite cubic-bezier(0, 0, 0.65, 1);
-webkit-animation: ball-3ndy 2s infinite cubic-bezier(0, 0, 0.65, 1); }
.point4nd { -moz-animation: ball-4ndy 2s 1s infinite cubic-bezier(0, 0, 0.65, 1);
-webkit-animation: ball-4ndy 2s 1s infinite cubic-bezier(0, 0, 0.65, 1); }

.ball-arc2nd { -moz-animation: ball-2ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
-webkit-animation: ball-2ndx 2s infinite cubic-bezier(0, 0, 0.35, 1); }
.ball-arc3nd { -moz-animation: ball-3ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
-webkit-animation: ball-3ndx 2s infinite cubic-bezier(0, 0, 0.35, 1); }
.ball-arc4nd { -moz-animation: ball-4ndx 2s infinite cubic-bezier(0, 0, 0.35, 1);
-webkit-animation: ball-4ndx 2s infinite cubic-bezier(0, 0, 0.35, 1); }


@-moz-keyframes ball-2ndx {
0% { -moz-transform:translateX(0px); }
25% { -moz-transform:translateX(100px); -moz-animation-timing-function: ease-in; }
50% { -moz-transform:translateX(0px); }
75% { -moz-transform:translateX(-100px); -moz-animation-timing-function: ease-in;}
100% { -moz-transform:translateX(0px); }
}

@-moz-keyframes ball-3ndx {
0% { -moz-transform:translateX(0px); }
25% { -moz-transform:translateX(35px); -moz-animation-timing-function: ease-in; }
50% { -moz-transform:translateX(0px); }
75% { -moz-transform:translateX(-35px); -moz-animation-timing-function: ease-in;}
100% { -moz-transform:translateX(0px); }
}

@-moz-keyframes ball-4ndx {
0% { -moz-transform:translateX(0px); }
25% { -moz-transform:translateX(25px); -moz-animation-timing-function: ease-in; }
50% { -moz-transform:translateX(0px); }
75% { -moz-transform:translateX(-25px); -moz-animation-timing-function: ease-in;}
100% { -moz-transform:translateX(0px); }
}


@-moz-keyframes ball-2ndy {
0% { -moz-transform: translateY(0px); -moz-animation-timing-function: ease-in;}
25% { -moz-transform: translateY(25px); }
50% { -moz-transform: translateY(50px); -moz-animation-timing-function: ease-in; }
75% { -moz-transform: translateY(25px); }
100% { -moz-transform: translateY(0px); }
}

@-moz-keyframes ball-3ndy {
0% { -moz-transform: translateY(-50px); -moz-animation-timing-function: ease-in;}
25% { -moz-transform: translateY(50px); }
50% { -moz-transform: translateY(100px); -moz-animation-timing-function: ease-in; }
75% { -moz-transform: translateY(50px); }
100% { -moz-transform: translateY(-50px); }
}

@-moz-keyframes ball-4ndy {
0% { -moz-transform: translateY(0px); -moz-animation-timing-function: ease-in;}
25% { -moz-transform: translateY(30px); }
50% { -moz-transform: translateY(50px); -moz-animation-timing-function: ease-in; }
75% { -moz-transform: translateY(30px); }
100% { -moz-transform: translateY(0px); }
}

@-webkit-keyframes ball-2ndx {
0% { -webkit-transform:translateX(0px); }
25% { -webkit-transform:translateX(100px); -webkit-animation-timing-function: ease-in; }
50% { -webkit-transform:translateX(0px); }
75% { -webkit-transform:translateX(-100px); -webkit-animation-timing-function: ease-in;}
100% { -webkit-transform:translateX(0px); }
}

@-webkit-keyframes ball-3ndx {
0% { -webkit-transform:translateX(0px); }
25% { -webkit-transform:translateX(35px); -webkit-animation-timing-function: ease-in; }
50% { -webkit-transform:translateX(0px); }
75% { -webkit-transform:translateX(-35px); -webkit-animation-timing-function: ease-in;}
100% { -webkit-transform:translateX(0px); }
}

@-webkit-keyframes ball-4ndx {
0% { -webkit-transform:translateX(0px); }
25% { -webkit-transform:translateX(25px); -webkit-animation-timing-function: ease-in; }
50% { -webkit-transform:translateX(0px); }
75% { -webkit-transform:translateX(-25px); -webkit-animation-timing-function: ease-in;}
100% { -webkit-transform:translateX(0px); }
}


@-webkit-keyframes ball-2ndy {
0% { -webkit-transform: translateY(0px); -webkit-animation-timing-function: ease-in;}
25% { -webkit-transform: translateY(25px); }
50% { -webkit-transform: translateY(50px); -webkit-animation-timing-function: ease-in; }
75% { -webkit-transform: translateY(25px); }
100% { -webkit-transform: translateY(0px); }
}

@-webkit-keyframes ball-3ndy {
0% { -webkit-transform: translateY(-50px); -webkit-animation-timing-function: ease-in;}
25% { -webkit-transform: translateY(50px); }
50% { -webkit-transform: translateY(100px); -webkit-animation-timing-function: ease-in; }
75% { -webkit-transform: translateY(50px); }
100% { -webkit-transform: translateY(-50px); }
}

@-webkit-keyframes ball-4ndy {
0% { -webkit-transform: translateY(0px); -webkit-animation-timing-function: ease-in;}
25% { -webkit-transform: translateY(30px); }
50% { -webkit-transform: translateY(50px); -webkit-animation-timing-function: ease-in; }
75% { -webkit-transform: translateY(30px); }
100% { -webkit-transform: translateY(0px); }
}

4. Lalu letakkan kode ini di atas tag </body>

<div class="ball-arc2nd">
<div class="point2nd"></div>
</div>

<div class="ball-arc3nd">
<div class="point3nd"></div>
</div>

<div class="ball-arc4nd">
<div class="point4nd"></div>
</div>

Demo ada pada bagian header blog ini, perhatikanlah...!

Share Please :

Posted by : Keiruchan Agatha ~ / Portal Media Informasi Pilihan

Anda telah membaca artikel Membuat Efek Animasi Loading Blog Dengan CSS3 Part 2 Ditulis oleh Keiruchan Agatha pada Kamis, 29 November 2012. Kritik dan saran dapat disampaikan via kotak komentar. Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link yang ada di bawah sebagai sumbernya. Atas perhatiannya saya ucapkan terimakasih. Salam blogger and Happy blogging. <a href="http://republicofnote.blogspot.com/2012/11/membuat-efek-animasi-loading-blog-dengan-css3-part2.html" target="_blank">Membuat Efek Animasi Loading Blog Dengan CSS3 Part 2</a>

Artikel Acak

Jika anda suka dengan artikel ini klik disini, atau berlangganan untuk menerima konten selengkapnya.

Ayo Berlangganan Disini !!

Baca Yang Ini Juga Boz :

Tips and Tricks

• Cara Membuat Emoticon Gambar Buatan Sendiri di Chat Facebook
• Generator Untuk Mencari Leecher Pada Hosting
• Cara Download di Hosting Billion Uploads
• Cara Mengatasi Masalah Manager Yang Error di Windows 8
• Cara Activation Windows 8 With Phone Skype
• Cara Menghilangkan Tanda Shortcut
• Cara Membuat Widget Fungsi Scoll
• Cara Mengecek MD5SUM ISO Hasil Download di Linux
• Percantik Blog Dengan Effect Page Peel Join Us On Facebook
• Cara Daftar ID Di Vivalog-Viva News

Blog

• Cara Membuat Widget Fungsi Scoll
• Percantik Blog Dengan Effect Page Peel Join Us On Facebook
• Cara Membuat Sitemap Keren Dengan CSS Efek Accordian
• Trik Memasang Meta Tag Geotag di Blog, ICBM, Geo Position
• Teks Subscript dan Superscript di Blog
• Perubahan Tampilan Like Box Facebook!
• Cara Verifikasi Blog Di Pinterest Untuk Menambah Visitor dan SEO
• Cara Delete Link Hidup Secara Otomatis Di Form Komentar
• Cara Mengatasi Hilangnya H1:Zero, that is Really Bad di chkme.com

Tutorial

• Generator Untuk Mencari Leecher Pada Hosting
• Cara Download di Hosting Billion Uploads
• Ebook CodeIgniter Untuk Pemula
• Free Download Ebook Tutorial Hacking With Backtrack
• Cara Mengatasi Masalah Manager Yang Error di Windows 8
• Cara Activation Windows 8 With Phone Skype
• Percantik Tampilan Terminal Anda
• Teks Subscript dan Superscript di Blog
• Cara Membuat Zombie Berjalan Di Blog
• Santa Clause Terbang Bersama Blogger di Malam Natal