Ένας Loaders διαφορετικός από τους άλλους
Ένας Loaders διαφορετικός από τους άλλουςγια το blog και το site σας.
Αντιγραφή επικόλληση τον παρακάτω κώδικα:
<style>
/* foulscode.blogspot.gr */
body { background:black; overflow:hidden; }
div {
height:150px; width:150px;
border:2px solid white;
position:absolute; top:50%; left:50%;
-webkit-transform: perspective(600px) rotateX(64.5deg) rotate(45deg);
-webkit-transform-origin: top left;
-webkit-transform-style: preserve-3D;
transform: perspective(600px) rotateX(64.5deg) rotate(45deg);
transform-origin: top left;
transform-style: preserve-3D;
}
div:nth-child(1) { top: 50%; -webkit-animation:first 3.5s infinite; animation:first 3.5s infinite; }
div:nth-child(2) { top:47.5%; -webkit-animation:second 3.5s infinite; animation:second 3.5s infinite; }
div:nth-child(3) { top: 45%; -webkit-animation:third 3.5s infinite; animation:third 3.5s infinite; }
div:nth-child(4) { top:42.5%; -webkit-animation:fourth 3.5s infinite; animation:fourth 3.5s infinite; }
div:nth-child(5) { top: 40%; -webkit-animation:fifth 3.5s infinite; animation:fifth 3.5s infinite; }
div:nth-child(6) { top:37.5%; -webkit-animation:sixth 3.5s infinite; animation:sixth 3.5s infinite; }
div:nth-child(7) { top: 35%; -webkit-animation:seventh 3.5s infinite; animation:seventh 3.5s infinite; }
div:nth-child(8) { top:32.5%; -webkit-animation:eighth 3.5s infinite; animation:eighth 3.5s infinite; }
div:nth-child(9) { top: 30%; -webkit-animation:ninth 3.5s infinite; animation:ninth 3.5s infinite; }
@keyframes first {
98% { top: 50%; }
3% { top: 50%; }
50% { top: -37%; }
50.001% { top: 125%; }
}
@keyframes second {
98.5% { top:47.5%; }
3.5% { top:47.5%; }
50% { top: -38%; }
50.001% { top: 125%; }
}
@keyframes third {
99% { top: 45%; }
4% { top: 45%; }
50% { top: -40%; }
50.001% { top: 125%; }
}
@keyframes fourth {
99.5% { top:42.5%; }
4.5% { top:42.5%; }
50% { top: -41%; }
50.001% { top: 125%; }
}
@keyframes fifth {
0% { top: 40%; }
5% { top: 40%; }
50% { top: -43%; }
50.001% { top: 125%; }
}
@keyframes sixth {
0.5% { top:37.5%; }
5.5% { top:37.5%; }
50% { top: -44%; }
50.001% { top: 125%; }
}
@keyframes seventh {
1% { top: 35%; }
6% { top: 35%; }
50% { top: -45%; }
50.001% { top: 125%; }
}
@keyframes eighth {
1.5% { top:32.5%; }
6.5% { top:32.5%; }
50% { top: -47%; }
50.001% { top: 125%; }
}
@keyframes ninth {
2% { top: 30%; }
7% { top: 30%; }
50% { top: -48%; }
50.001% { top: 125%; }
}
@-webkit-keyframes first {
98% { top: 50%; }
3% { top: 50%; }
50% { top: -37%; }
50.001% { top: 125%; }
}
@-webkit-keyframes second {
98.5% { top:47.5%; }
3.5% { top:47.5%; }
50% { top: -38%; }
50.001% { top: 125%; }
}
@-webkit-keyframes third {
99% { top: 45%; }
4% { top: 45%; }
50% { top: -40%; }
50.001% { top: 125%; }
}
@-webkit-keyframes fourth {
99.5% { top:42.5%; }
4.5% { top:42.5%; }
50% { top: -41%; }
50.001% { top: 125%; }
}
@-webkit-keyframes fifth {
0% { top: 40%; }
5% { top: 40%; }
50% { top: -43%; }
50.001% { top: 125%; }
}
@-webkit-keyframes sixth {
0.5% { top:37.5%; }
5.5% { top:37.5%; }
50% { top: -44%; }
50.001% { top: 125%; }
}
@-webkit-keyframes seventh {
1% { top: 35%; }
6% { top: 35%; }
50% { top: -45%; }
50.001% { top: 125%; }
}
@-webkit-keyframes eighth {
1.5% { top:32.5%; }
6.5% { top:32.5%; }
50% { top: -47%; }
50.001% { top: 125%; }
}
@-webkit-keyframes ninth {
2% { top: 30%; }
7% { top: 30%; }
50% { top: -48%; }
50.001% { top: 125%; }
}
/* foulscode.blogspot.gr */
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Και μετά αποθήκευση.
Για τυχόν απορίες αφήστε το σχολειό σας!
Κατηγορίες:
Σχόλια