Web Analytics Made Easy - StatCounter
FoulsCode

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

2 Φεβρουαρίου 2015

progressbar Loader


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

<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
Διαβάστε Περισσότερα »

6 Δεκεμβρίου 2013

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



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


<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>


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

Διαβάστε Περισσότερα »

29 Νοεμβρίου 2013

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



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

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



Διαβάστε Περισσότερα »

5 Ιουλίου 2013

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


Καλημέρα σε όλους τους μπλόγκερ και μη. Κάτι που έλειπε από το 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> 


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


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


Διαβάστε Περισσότερα »
Related Posts Plugin for WordPress, Blogger...