Kατεβάσετε την εφαρμογή android του blog! DownLoad

FoulsCode: 2011-17

Translate

Πρόσφατα Σχόλια

Σύνολο αναρτήσεων

Συνολικές προβολές σελίδας

Εμφάνιση αναρτήσεων με ετικέτα Loaders. Εμφάνιση όλων των αναρτήσεων
Εμφάνιση αναρτήσεων με ετικέτα Loaders. Εμφάνιση όλων των αναρτήσεων

progressbar Loader

Written By Fouls Code on Δευτέρα, 2 Φεβρουαρίου 2015 | Φεβρουαρίου 02, 2015


Αντιγραφή τον παρακάτω κώδικα:

<style>
/* foulscode.blogspot.com */
body {
  margin: 200px 50px;
}
.progressbar {
  width: 300px;
  height: 25px;
  border-radius: 8px;
  box-shadow:
    0 2px 0px 0px hsl(210,90%,35%),
    2px 8px 15px 1px hsl(210,90%,70%);
  background-color: hsl(210,90%,70%);
  background-image:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 12%,
      rgba(255,255,255,.15) 15%,
      rgba(255,255,255,.15) 30%,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,.15) 70%,
      rgba(255,255,255,.15) 88%,
      rgba(255,255,255,0) 88%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 25%,
      hsl(210,90%,40%) 25%,
      hsl(210,90%,40%) 50%,
      transparent 50%,
      transparent 75%,
      hsl(210,90%,40%) 75%,
      hsl(210,90%,40%) 100%
    );
  background-size: cover, 50px 50px;
  background-position: top, 0 0;
  text-indent: -999em;
  animation: loading 1s infinite linear;
}
@keyframes loading {
  0% {
    background-position: top, 0 0;
  }
  100% {
    background-position: top, 50px 0;
  }
}
/* foulscode.blogspot.com */
</style>
<div class="progressbar">please wait..</div>


DEMO
Φεβρουαρίου 02, 2015 | 0 σχόλια | Διαβάστε περισσότερα

Ένας Loaders για το site και blog σας!

Written By Fouls Code on Παρασκευή, 6 Δεκεμβρίου 2013 | Δεκεμβρίου 06, 2013



Αντιγραφή επικόλληση των παρακάτω κώδικα:


<style>
/* foulscode */
body {
  font-size: 50px;
  text-align: center;
  padding: 50px;
}
div {
  position: absolute;
  left: 50%;
  width: 50px;
  height: 200px;
  opacity: 0.25;
  -webkit-animation: whoosh 0.6s infinite;
}
.one {background-color: #000;-webkit-transform:rotate(30deg);animation-delay: 0.1s;}
.two {background-color: #000;-webkit-transform:rotate(60deg);animation-delay: 0.2s;}
.three {background-color: #000;-webkit-transform:rotate(90deg);animation-delay: 0.3s;}
.four {background-color: #000;-webkit-transform:rotate(120deg);animation-delay: 0.4s;}
.five {background-color: #000;-webkit-transform:rotate(150deg);animation-delay: 0.5s;}
.six {background-color: #000;-webkit-transform:rotate(180deg);animation-delay: 0.6s;}
@-webkit-keyframes whoosh {
  0%, 100%  {}
  50% {-webkit-border-radius: 50px;
      border-radius: 50px;
      opacity:0.3;
  }
}
/* foulscode */
</style>
<p>The Thing</p>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>


Και μετά αποθήκευση!

Δεκεμβρίου 06, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Ένας Loaders διαφορετικός από τους άλλους

Written By Fouls Code on Παρασκευή, 29 Νοεμβρίου 2013 | Νοεμβρίου 29, 2013



Ένας 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>



Και μετά αποθήκευση.

Για τυχόν απορίες αφήστε το σχολειό σας!



Νοεμβρίου 29, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Όμορφα Loaders για blog/site

Written By Fouls Code on Παρασκευή, 5 Ιουλίου 2013 | Ιουλίου 05, 2013


Καλημέρα σε όλους τους μπλόγκερ και μη. Κάτι που έλειπε από το blog είναι μερική Loaders, μπορείτε να τους εφαρμόσετε σε blog και σε διαφορα site αυτό που πρέπει να κάνετε είναι αντιγραφή επικόλληση τον παρακάτω κώδικα που σας αρέσει. 
Πάμε να δούμε μερικούς 





<style> /* foulscode.blogspot.gr */
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
@keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}
@-o-keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}
@-ms-keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}
@-moz-keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}
@-webkit-keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}
#loader{
width:85px;
  height:55px;
margin:100px auto;
}
.bar{
float:left;
margin:0px 2px;
width:10px;
height:50px;
background:#7bf;
border-top:3px solid #7af;
border-bottom:3px solid #7af;
/*border-radius*/
-webkit-border-radius:10px;
   -moz-border-radius:10px;
        border-radius:10px;
}
.bar:nth-child(1){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
}
.bar:nth-child(2){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:.2s;
   -moz-animation-delay:.2s;
    -ms-animation-delay:.2s;
     -o-animation-delay:.2s;
        animation-delay:.2s;
}
.bar:nth-child(3){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:.4s;
   -moz-animation-delay:.4s;
    -ms-animation-delay:.4s;
     -o-animation-delay:.4s;
        animation-delay:.4s;
}
.bar:nth-child(4){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:.6s;
   -moz-animation-delay:.6s;
    -ms-animation-delay:.6s;
     -o-animation-delay:.6s;
        animation-delay:.6s;
}
.bar:nth-child(5){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:.8s;
   -moz-animation-delay:.8s;
    -ms-animation-delay:.8s;
     -o-animation-delay:.8s;
        animation-delay:.8s;
}
.bar:nth-child(6){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
   -moz-animation-delay:1s;
    -ms-animation-delay:1s;
     -o-animation-delay:1s;
        animation-delay:1s;
}
p {
  text-align:center;
  font-size:30px;
  font-family:helvetica neue;
  font-weight:100;
}
a {
  color:#7bf;
  text-decoration:none;
}
/* foulscode.blogspot.gr */
</style>
<div id="loader">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div><br>
<p>Waiting for followers <a href="http://twitter.com/foulscode">here <span class="entypo-twitter-circled"></span></a></p>


LIVE DEMO



windows8

<style>
/* foulscode.blogspot.gr */.windows8 {
position: relative;
width: 90px;
height:90px;
}
.windows8 .wBall {
position: absolute;
width: 86px;
height: 86px;
opacity: 0;
-moz-transform: rotate(225deg);
-moz-animation: orbit 4.95s infinite;
-webkit-transform: rotate(225deg);
-webkit-animation: orbit 4.95s infinite;
-o-transform: rotate(225deg);
-o-animation: orbit 4.95s infinite;
-ms-transform: rotate(225deg);
-ms-animation: orbit 4.95s infinite;
transform: rotate(225deg);
animation: orbit 4.95s infinite;
}
.windows8 .wBall .wInnerBall{
position: absolute;
width: 11px;
height: 11px;
background: #FFA200;
left:0px;
top:0px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-o-border-radius: 11px;
-ms-border-radius: 11px;
border-radius: 11px;
}
.windows8 #wBall_1 {
-moz-animation-delay: 1.08s;
-webkit-animation-delay: 1.08s;
-o-animation-delay: 1.08s;
-ms-animation-delay: 1.08s;
animation-delay: 1.08s;
}
.windows8 #wBall_2 {
-moz-animation-delay: 0.22s;
-webkit-animation-delay: 0.22s;
-o-animation-delay: 0.22s;
-ms-animation-delay: 0.22s;
animation-delay: 0.22s;
}
.windows8 #wBall_3 {
-moz-animation-delay: 0.43s;
-webkit-animation-delay: 0.43s;
-o-animation-delay: 0.43s;
-ms-animation-delay: 0.43s;
animation-delay: 0.43s;
}
.windows8 #wBall_4 {
-moz-animation-delay: 0.65s;
-webkit-animation-delay: 0.65s;
-o-animation-delay: 0.65s;
-ms-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.windows8 #wBall_5 {
-moz-animation-delay: 0.86s;
-webkit-animation-delay: 0.86s;
-o-animation-delay: 0.86s;
-ms-animation-delay: 0.86s;
animation-delay: 0.86s;
}
@-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}
30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}
39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}
70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}
75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}
76% {
opacity: 0;
-moz-transform:rotate(900deg);
}
100% {
opacity: 0;
-moz-transform: rotate(900deg);
}
}
@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}
30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}
39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}
70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}
75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}
76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}
100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}
}
@-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}
30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}
39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}
70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}
75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}
76% {
opacity: 0;
-o-transform:rotate(900deg);
}
100% {
opacity: 0;
-o-transform: rotate(900deg);
}
}
@-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}
30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}
39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}
70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}
75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}
76% {
opacity: 0;
-ms-transform:rotate(900deg);
}
100% {
opacity: 0;
-ms-transform: rotate(900deg);
}
}
@keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}
30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}
39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}
70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}
75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}
76% {
opacity: 0;
transform:rotate(900deg);
}
100% {
opacity: 0;
transform: rotate(900deg);
}
}
/* foulscode.blogspot.gr */</style>
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall">
</div>
</div>
</div>



spinningSquaresG
<style>
/* foulscode.blogspot.gr */
#spinningSquaresG{
position:relative;
width:240px;
height:29px}
.spinningSquaresG{
position:absolute;
top:0;
background-color:#FF5900;
width:29px;
height:29px;
-moz-animation-name:bounce_spinningSquaresG;
-moz-animation-duration:0.9s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_spinningSquaresG;
-webkit-animation-duration:0.9s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-o-animation-name:bounce_spinningSquaresG;
-o-animation-duration:0.9s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
-ms-animation-name:bounce_spinningSquaresG;
-ms-animation-duration:0.9s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
animation-name:bounce_spinningSquaresG;
animation-duration:0.9s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
}
#spinningSquaresG_1{
left:0;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-o-animation-delay:0.36s;
-ms-animation-delay:0.36s;
animation-delay:0.36s;
}
#spinningSquaresG_2{
left:30px;
-moz-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-o-animation-delay:0.45s;
-ms-animation-delay:0.45s;
animation-delay:0.45s;
}
#spinningSquaresG_3{
left:60px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-o-animation-delay:0.54s;
-ms-animation-delay:0.54s;
animation-delay:0.54s;
}
#spinningSquaresG_4{
left:90px;
-moz-animation-delay:0.63s;
-webkit-animation-delay:0.63s;
-o-animation-delay:0.63s;
-ms-animation-delay:0.63s;
animation-delay:0.63s;
}
#spinningSquaresG_5{
left:120px;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-o-animation-delay:0.72s;
-ms-animation-delay:0.72s;
animation-delay:0.72s;
}
#spinningSquaresG_6{
left:150px;
-moz-animation-delay:0.81s;
-webkit-animation-delay:0.81s;
-o-animation-delay:0.81s;
-ms-animation-delay:0.81s;
animation-delay:0.81s;
}
#spinningSquaresG_7{
left:180px;
-moz-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
animation-delay:0.9s;
}
#spinningSquaresG_8{
left:210px;
-moz-animation-delay:0.99s;
-webkit-animation-delay:0.99s;
-o-animation-delay:0.99s;
-ms-animation-delay:0.99s;
animation-delay:0.99s;
}
@-moz-keyframes bounce_spinningSquaresG{
0%{
-moz-transform:scale(1);
background-color:#FF5900;
}
100%{
-moz-transform:scale(.3) rotate(90deg);
background-color:#A897A8;
}
}
@-webkit-keyframes bounce_spinningSquaresG{
0%{
-webkit-transform:scale(1);
background-color:#FF5900;
}
100%{
-webkit-transform:scale(.3) rotate(90deg);
background-color:#A897A8;
}
}
@-o-keyframes bounce_spinningSquaresG{
0%{
-o-transform:scale(1);
background-color:#FF5900;
}
100%{
-o-transform:scale(.3) rotate(90deg);
background-color:#A897A8;
}
}
@-ms-keyframes bounce_spinningSquaresG{
0%{
-ms-transform:scale(1);
background-color:#FF5900;
}
100%{
-ms-transform:scale(.3) rotate(90deg);
background-color:#A897A8;
}
}
@keyframes bounce_spinningSquaresG{
0%{
transform:scale(1);
background-color:#FF5900;
}
100%{
transform:scale(.3) rotate(90deg);
background-color:#A897A8;
}
}
/* foulscode.blogspot.gr */
</style>
<div id="spinningSquaresG">
<div id="spinningSquaresG_1" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_2" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_3" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_4" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_5" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_6" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_7" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_8" class="spinningSquaresG">
</div>
</div>



facebookG




<style>
/* foulscode.blogspot.gr */
#facebookG{
width:128px}
.facebook_blockG{
background-color:#FFFFFF;
border:3px solid #FF5900;
float:left;
height:91px;
margin-left:7px;
width:24px;
opacity:0.1;
-moz-animation-name:bounceG;
-moz-animation-duration:0.9s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(0.7);
-webkit-animation-name:bounceG;
-webkit-animation-duration:0.9s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(0.7);
-o-animation-name:bounceG;
-o-animation-duration:0.9s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(0.7);
-ms-animation-name:bounceG;
-ms-animation-duration:0.9s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(0.7);
animation-name:bounceG;
animation-duration:0.9s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(0.7);
}
#blockG_1{
-moz-animation-delay:0.27s;
-webkit-animation-delay:0.27s;
-o-animation-delay:0.27s;
-ms-animation-delay:0.27s;
animation-delay:0.27s;
}
#blockG_2{
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-o-animation-delay:0.36s;
-ms-animation-delay:0.36s;
animation-delay:0.36s;
}
#blockG_3{
-moz-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-o-animation-delay:0.45s;
-ms-animation-delay:0.45s;
animation-delay:0.45s;
}
@-moz-keyframes bounceG{
0%{
-moz-transform:scale(1.2);
opacity:1}
100%{
-moz-transform:scale(0.7);
opacity:0.1}
}
@-webkit-keyframes bounceG{
0%{
-webkit-transform:scale(1.2);
opacity:1}
100%{
-webkit-transform:scale(0.7);
opacity:0.1}
}
@-o-keyframes bounceG{
0%{
-o-transform:scale(1.2);
opacity:1}
100%{
-o-transform:scale(0.7);
opacity:0.1}
}
@-ms-keyframes bounceG{
0%{
-ms-transform:scale(1.2);
opacity:1}
100%{
-ms-transform:scale(0.7);
opacity:0.1}
}
@keyframes bounceG{
0%{
transform:scale(1.2);
opacity:1}
100%{
transform:scale(0.7);
opacity:0.1}
}
/* foulscode.blogspot.gr */
</style>
<div id="facebookG">
<div id="blockG_1" class="facebook_blockG">
</div>
<div id="blockG_2" class="facebook_blockG">
</div>
<div id="blockG_3" class="facebook_blockG">
</div>
</div> 


Αποθήκευση και αυτό ήταν.


Αν θέλετε ένα από τα παραπάνω σε διαφορετικό χρώμα το μονο που πρέπει να κάνετε είναι να αφήσετε το σχολειό σας.


Ιουλίου 05, 2013 | 0 σχόλια | Διαβάστε περισσότερα
 
berita unik