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 :