.jpg)
Rabu, 03 Juli 2013
Apa kabar sahabat Taretan Mania ,, kali ini saya akan memposting sebuah postingan yang berjudul Cara Membuat Loading Animasi CSS 3 - Tutorial Blog tentang CSS 3 Percobaan Membuat Loading Animasi kita akan belajar membuat loading animasi sederhana dengan memanfaatkan efek transisi pada CSS 3 .
Langsung saja silahkan Anda coba Cara Membuat Loading Animasi :
Cara Menambahkannya ke Blog
KODE HTML
<div class="loading-wrap">
<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
</div>
<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
</div>
KODE CSS
.loading-wrap {
width: 60px; height: 60px;
position: absolute;
top: 50%; left: 50%;
margin: -30px 0 0 -30px;
background: #777;
animation: rotation ease-in-out 2s infinite; border-radius: 30px;
}
.triangle1, .triangle2, .triangle3 {
border-width: 0 20px 30px 20px;
border-style: solid;
border-color: transparent;
border-bottom-color: #67cbf0;
height: 0; width: 0;
position: absolute;
left: 10px; top: -10px;
animation: fadecolor 2s 1s infinite;}
.triangle2, .triangle3 {
content: '';
top: 20px; left: 30px;
animation-delay: 1.1s;}
.triangle3 {
left: -10px;
animation-delay: 1.2s;}
@keyframes rotation {
0% {transform: rotate(0deg);}
20% {transform: rotate(360deg);}
100% {transform: rotate(360deg);}
}
@keyframes fadecolor {
0% {border-bottom-color: #eee;}
100%{border-bottom-color: #67cbf0;}
}
width: 60px; height: 60px;
position: absolute;
top: 50%; left: 50%;
margin: -30px 0 0 -30px;
background: #777;
animation: rotation ease-in-out 2s infinite; border-radius: 30px;
}
.triangle1, .triangle2, .triangle3 {
border-width: 0 20px 30px 20px;
border-style: solid;
border-color: transparent;
border-bottom-color: #67cbf0;
height: 0; width: 0;
position: absolute;
left: 10px; top: -10px;
animation: fadecolor 2s 1s infinite;}
.triangle2, .triangle3 {
content: '';
top: 20px; left: 30px;
animation-delay: 1.1s;}
.triangle3 {
left: -10px;
animation-delay: 1.2s;}
@keyframes rotation {
0% {transform: rotate(0deg);}
20% {transform: rotate(360deg);}
100% {transform: rotate(360deg);}
}
@keyframes fadecolor {
0% {border-bottom-color: #eee;}
100%{border-bottom-color: #67cbf0;}
}
