Expose

5By2.tk

Showing posts with label css. Show all posts
Showing posts with label css. Show all posts


<html>
<head>
<style type="text/css">
body {
 background-color:#eee;
 text-align:center;
 margin:85px 0;
}

.toggle {
 position:relative;
 display:inline-block;
 width:40px;
 height:60px;
 background-color:#bbb;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 text-align:center;
}

.toggle input {
 width:100%;
 height:100%;
 margin:0 0;
 padding:0 0;
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 z-index:2;
 cursor:pointer;
 opacity:0;
 filter:alpha(opacity=0);
}

.toggle label {
 display:block;
 position:absolute;
 top:1px;
 right:1px;
 bottom:1px;
 left:1px;
 background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
 background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
 background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
 background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
 background-image:linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
  -moz-box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
  box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
 border-radius:3px;
 font:normal 11px Arial,Sans-Serif;
 color:#666;
 text-shadow:0 1px 0 white;
 cursor:text;
}

.toggle label:before {
 content:attr(data-off);
 position:absolute;
 top:6px;
 right:0;
 left:0;
 z-index:4;
}

.toggle label:after {
 content:attr(data-on);
 position:absolute;
 right:0;
 bottom:11px;
 left:0;
 color:#666;
 text-shadow:0 -1px 0 #eee;
}

.toggle input:checked + label {
 background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
 background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
 background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
 background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
 background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  -webkit-box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  -moz-box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
}

.toggle input:checked:hover + label {
  box-shadow:0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
}

.toggle input:checked + label:before {
 z-index:1;
 top:11px;
}

.toggle input:checked + label:after {
 bottom:9px;
 color:#aaa;
 text-shadow:none;
 z-index:4;
}
</style>
</head>
<body>
 <span class="toggle">
      <input type="checkbox" checked>
   <label data-off="&#10006;" data-on="&#10004;" ></label>
 </span>
 <span class="toggle">
   <input type="checkbox">
   <label data-off="&#9724;" data-on="&#9654;"></label>
 </span>
 <span class="toggle">
    <input type="checkbox">
   <label data-off="Stop" data-on="Play"></label>
 </span>
</body>
</html>



<html>
<head>
<style>
body {
 background-color: #ddd;
 font-family: Helvetica,Helvetica Neue,Arial;
 color: #757575;
 font-size: 14px;
 line-height: 1;
}
.clear {
 clear: both;
}
.rss {
 width: 400px;
 height: 300px;
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -150px 0 0 -200px;
 background: #d4d5d6;
 background: -webkit-linear-gradient(top, #d4d5d6 0%, #d2d3d4 22%, #c8c9ca 68%, #c8c9ca 100%);
 background: -moz-linear-gradient(top, #d4d5d6 0%, #d2d3d4 22%, #c8c9ca 68%, #c8c9ca 100%);
 background: -o-linear-gradient(top, #d4d5d6 0%, #d2d3d4 22%, #c8c9ca 68%, #c8c9ca 100%);
 background: -ms-linear-gradient(top, #d4d5d6 0%, #d2d3d4 22%, #c8c9ca 68%, #c8c9ca 100%);
 background: linear-gradient(top, #d4d5d6 0%, #d2d3d4 22%, #c8c9ca 68%, #c8c9ca 100%);
 box-shadow: 0 0px 20px 0 #000 inset;
 border-radius:0 0 15px 15px;
 text-align: center;
 overflow: hidden;
}
.rss:before {
 content: "";
 background: -webkit-radial-gradient(center, ellipse cover, rgba(254,254,254,1) 0%, rgba(254,254,254,0) 50%,
rgba(254,254,254,0) 100%);
 background: -moz-radial-gradient(center, ellipse cover, rgba(254,254,254,1) 0%,rgba(254,254,254,0) 50%,rgba(254,254,254,0) 100%);
 background: -ms-radial-gradient(center, ellipse cover,rgba(254,254,254,1) 0%, rgba(254,254,254,0) 50%,rgba(254,254,254,0) 100%);
 background: -o-radial-gradient(center, ellipse cover,rgba(254,254,254,1) 0%,rgba(254,254,254,0) 50%,rgba(254,254,254,0) 100%);
 width: 600px;
 height: 600px;
 display: block;
 position: absolute;
 top: -300px;
 left: 50%;
 margin-left: -300px;
 opacity: 0.8;
}

label {
 width: 90px;
 height: 30px;
 display: inline-block;
 margin-top: 100px;
 position: relative;
 border-radius: 14px;
 background: rgb(138,138,138);
 background: -webkit-linear-gradient(top,rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%,rgba(159,159,159,1) 72%,  rgba(164,164,164,1) 100%);
 background: -moz-linear-gradient(top,rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%,rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
 background: -ms-linear-gradient(top,rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%,rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
 background: -o-linear-gradient(top,rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%,rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
 box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
 line-height: 30px;
 font-style: normal;
 color: #fff;
 text-shadow: 0 1px 1px rgba(0,0,0,0.1);
 font-weight: bold;
 -webkit-box-reflect: below 5px
  -webkit-gradient(linear, left top, left bottom,
  color-stop(0.5, transparent),
  to(rgba(255, 255, 255, 0.8)));
 -moz-transition: all 1s ease-in;
 -webkit-transition: all 1s ease-in;
 -o-transition: all 1s ease-in;
 transition: all 1s ease-in;
 cursor: pointer;
}

label.attention:hover {
}
label.attention:hover:before {
 content: ""; /* &#9762; */
 font-size: 22px
}
input[type=checkbox]:checked ~ label.attention:hover:before  {
}


label i {
 position: absolute;
 top: -4px;
 right:60px;
 width: 36px;
 height: 36px;
 display: block;
 border-radius: 36px;
 background: rgb(255,255,255);
 background: -webkit-linear-gradient(top, 
  rgba(255,255,255,1) 0%, 
  rgba(252,252,252,1) 11%, 
  rgba(228,228,228,1) 50%,
  rgba(221,221,221,1) 53%,
  rgba(205,205,205,1) 97%, 
  rgba(191,191,191,1) 100%);
 background: -moz-linear-gradient(top, 
  rgba(255,255,255,1) 0%, 
  rgba(252,252,252,1) 11%,
  rgba(228,228,228,1) 50%,
  rgba(221,221,221,1) 53%, 
  rgba(205,205,205,1) 97%, 
  rgba(191,191,191,1) 100%);
 background: -o-linear-gradient(top, 
  rgba(255,255,255,1) 0%,
  rgba(252,252,252,1) 11%,
  rgba(228,228,228,1) 50%, 
  rgba(221,221,221,1) 53%, 
  rgba(205,205,205,1) 97%,
  rgba(191,191,191,1) 100%);
 background: -ms-linear-gradient(top, 
  rgba(255,255,255,1) 0%, 
  rgba(252,252,252,1) 11%,
  rgba(228,228,228,1) 50%, 
  rgba(221,221,221,1) 53%, 
  rgba(205,205,205,1) 97%, 
  rgba(191,191,191,1) 100%);
 background: linear-gradient(top, 
  rgba(255,255,255,1) 0%,
  rgba(252,252,252,1) 11%,
  rgba(228,228,228,1) 50%,
  rgba(221,221,221,1) 53%, 
  rgba(205,205,205,1) 97%, 
  rgba(191,191,191,1) 100%);
 box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1),
    inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 0 0 rgba(0, 0, 0, 0.2);
 -webkit-transition: all 200ms ease;
 -moz-transition: all 200ms ease;
 -o-transition: all 200ms ease;
 -ms-transition: all 200ms ease;
 transition: all 200ms ease;
}

label i:before {
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 18px;
 height: 18px;
 margin: -9px 0 0 -9px;
 border-radius: 18px;
 background: rgb(239,239,239);
 background: -webkit-linear-gradient(top, 
      rgba(239,239,239,1) 0%,
      rgba(225,225,225,1) 6%, 
      rgba(225,225,225,1) 24%,
      rgba(229,229,229,1) 94%,
      rgba(242,242,242,1) 100%);
 background: -moz-linear-gradient(top,
      rgba(239,239,239,1) 0%,
      rgba(225,225,225,1) 6%,
      rgba(225,225,225,1) 24%,
      rgba(229,229,229,1) 94%, 
      rgba(242,242,242,1) 100%);
 background: -o-linear-gradient(top,
      rgba(239,239,239,1) 0%,
      rgba(225,225,225,1) 6%,
      rgba(225,225,225,1) 24%,
      rgba(229,229,229,1) 94%,
      rgba(242,242,242,1) 100%);
 background: -ms-linear-gradient(top, 
      rgba(239,239,239,1) 0%,
      rgba(225,225,225,1) 6%, 
      rgba(225,225,225,1) 24%,
      rgba(229,229,229,1) 94%, 
      rgba(242,242,242,1) 100%);
 background: linear-gradient(top, 
      rgba(239,239,239,1) 0%,
      rgba(225,225,225,1) 6%,
      rgba(225,225,225,1) 24%,
      rgba(229,229,229,1) 94%,
      rgba(242,242,242,1) 100%);
 box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
}
label:hover i {
 box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.3);
}
label:active i:before {
 box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
}

label:before {
 content: "off";
 margin-left: 30px;
 text-transform: uppercase;
 -webkit-transition: all 200ms ease;
 -moz-transition: all 200ms ease;
 -o-transition: all 200ms ease;
 -ms-transition: all 200ms ease;
 transition: all 200ms ease;
}

label:after {
 content: "dont't turn me";
 right: 85px;
 width: 150px;
 text-transform: uppercase;
 font-size: 10px;
 font-weight: bold;
 color: #999;
 text-shadow: 0 1px 1px rgba(255,255,255,0.5), 0 -1px 1px rgba(0,0,0,0.1);
 position: absolute;
 top: 0;
}

input[type=checkbox]:checked ~ label:before {
 content: "on";
 text-transform: uppercase;
 margin-right: 30px;
 margin-left: 0;
}

input[type=checkbox]:checked ~ label:after {
 content: "too bed";
 right: -130px;
}

input[type=checkbox]:checked ~ label{
 background: rgb(141,173,51);
 background: -webkit-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
 background: -moz-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
 background: -o-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
 background: -ms-radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
 background: radial-gradient(center, ellipse cover, rgba(141,173,51,1) 0%, rgba(146,178,55,1) 24%, rgba(157,187,64,1) 55%, rgba(166,194,78,1) 100%);
}

input[type=checkbox]:checked ~ label i {
 right: -6px;
}

input {
 position: absolute;
 bottom: 5px;
 left: 50%;
 margin-left: 10px;
 opacity: 0;
  -webkit-transition: all 0.3s ease-out; 
     -moz-transition: all 0.3s ease-out; 
       -o-transition: all 0.3s ease-out; 
          transition: all 0.3s ease-out; 
} 

</style>

</head>
<body>
<div class="rss">
  
  <input type="checkbox" id="buttonThree" />
  <label for="buttonThree"> <!-- class="attention" -->
    <i></i>
  </label>
  
</div>
</body>
</html>



<html>
<head>
<style>
body{
 overflow:hidden;
}
.container{
 background:#fff;
 width:100%;
 position:absolute;
 left:45%;
}
.animatedButton{
 font-family: Arial, sans-serif;
 text-decoration: none !important;
 background-color:#f90;
 padding-left: 40px;
 padding-right: 40px;
 height: 38px;
 line-height: 38px !important;
 display: inline-block;
 border: 1px solid #f40;
 text-shadow:0px 1px 1px #000;
    box-shadow: inset 0px 1px 1px #fff, 0 1px 0px 0px #000;
 border-radius: 5px;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 transition: all 0.2s linear;
 color:#000;
}

.animatedButtonText{
 font-family: Arial, sans-serif;
 line-height: 38px !important;
 font-size: 18px;
 color: #fff;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 transition: all 0.2s linear;
}


.animatedButton:hover{
 background-color:#f50;
 -webkit-box-shadow: inset 0px 1px 1px #000, 0 1px 0px 0px #fff;
    -moz-box-shadow: inset 0px 1px 1px #000, 0 1px 0px 0px #fff;
    box-shadow: inset 0px 1px 1px #000, 0 1px 0px 0px #fff;
 text-shadow:0px -1px 1px #000;
    color:#000;
}

.animatedButton:hover .animatedButtonText{
 text-shadow:0px -1px 1px #000;
    color:#fff;
}


/*** SECOND BUTTON ***/

.animatedButton2{
 text-decoration: none !important;
 background-color:#f90;
 padding-left: 40px;
 padding-right: 40px;
 height: 38px;
 line-height: 38px !important;
 display: inline-block;
 border: 1px solid #450003;
 text-shadow:0px 1px 1px #000;
    box-shadow: inset 0px 1px 1px #fff, 0 5px 0px 0px #330;
 border-radius: 5px;
 -webkit-transition: all 0.15s linear;
 -moz-transition: all 0.15s linear;
 -o-transition: all 0.15s linear;
}

.animatedButtonText2{
 font-family: Oswald, Arial, sans-serif;
 line-height: 38px !important;
 font-size: 18px;
 color: #EAEAEA;
 text-align:center;
 -webkit-transition: all 0.15s linear;
 -moz-transition: all 0.15s linear;
 -o-transition: all 0.15s linear;
 transition: all 0.15s linear;
}

.animatedButton2:hover{
 background-color:#690;
 margin-top:5px;
 color:#fff;
 -webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
}

.animatedButton2:hover .animatedButtonText2{

 text-shadow:1px 0px 1px #fff;
    color:#000;
}

/*** THIRD BUTTON ***/

.animatedButton3{
 font-family: Oswald, Arial, sans-serif;
 text-decoration: none !important;
 background-color:#f90;
 padding-left: 20px;
 padding-right: 20px;
 height: 38px;
 line-height: 38px !important;
 display: inline-block;
 border: 1px solid #450003;
 text-shadow:0px 1px 1px #000;
 overflow: hidden;
 -webkit-box-shadow: inset 0px 1px 1px #fff;
    -moz-box-shadow: inset 0px 1px 1px #fff;
    box-shadow: inset 0px 1px 1px #fff;
   -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 transition: all 0.2s linear;
}

.animatedButtonText3{
 font-family: Oswald, Arial, sans-serif;
 line-height: 38px !important;
 display: block;
 font-size: 18px;
 color: #EAEAEA;
 text-align:center;
 -webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
 -o-transition: all 0.2s linear;
 transition: all 0.2s linear;
}

.animatedButton3:hover{
 background-color:#690;
 height:75px;
 -webkit-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    -moz-box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;
    box-shadow: inset 0px 1px 1px #000, 0 0px 0px 0px #000;

}

.animatedButtonExtraText3{
 font-family: Arial, sans-serif;
 font-size:12px;
 color:#fff;
 overflow: hidden;

}
</style>
</head>

<body>
<div class="container">
 <a href="#" class="animatedButton" onClick="return false;">
   <span class="animatedButtonText">HOVER Me</span>

 </a>
 <br><br><br><br>
 
 <a href="#" class="animatedButton3" onClick="return false;">
  <span class="animatedButtonText3">HOVER Me</span>
  <span class="animatedButtonExtraText3">SOME EXTRA TEXT</span>

 </a>
 
 <br><br><br><br>
 <a href="#" class="animatedButton2" onClick="return false;">
  <span class="animatedButtonText2">HOVER Me</span>

 </a>

</body>

</html>


<html>
<head>
<style>

body,html {
width:100%;
height:100%;
background:#4c7a9e ;
}
@-webkit-keyframes color{
0%{color:#fff;}
  50%{color:transparent;}
  100%{color:#fff;}
}
@-webkit-keyframes border-c{
0%{border-color:transparent;border-top-color:#fff;}
  25%{border-color:transparent;border-right-color:#fff;}
  50%{border-color:transparent;border-bottom-color:#fff;}
  75%{border-color:transparent;border-left-color:#fff;}
  100%{border-color:transparent;border-top-color:#fff;}
}
#loader{
font-family:"helvetica neue";
text-align:center;
width:100px;
height:100px;
line-height:100px;
border:1px solid transparent;
-webkit-border-radius:100px;
   -moz-border-radius:100px;
        border-radius:100px;
display:block;
margin:120px auto;
padding:10px;
color:#fff;
font-weight:100;
-webkit-animation:border-c 1.25s linear 0 infinite;
   -moz-animation:border-c 1.25s linear 0 infinite;
    -ms-animation:border-c 1.25s linear 0 infinite;
     -o-animation:border-c 1.25s linear 0 infinite;
        animation:border-c 1.25s linear 0 infinite;
}
#loader span{
-webkit-animation:color 1.5s linear infinite;
   -moz-animation:color 1.5s linear infinite;
    -ms-animation:color 1.5s linear infinite;
     -o-animation:color 1.5s linear infinite;
        animation:color 1.5s linear infinite;
}
#loader span:nth-child(1){
-webkit-animation-delay:0s;
   -moz-animation-delay:0s;
    -ms-animation-delay:0s;
     -o-animation-delay:0s;
        animation-delay:0s;
}
#loader span:nth-child(2){
-webkit-animation-delay:.25s;
   -moz-animation-delay:.25s;
    -ms-animation-delay:.25s;
     -o-animation-delay:.25s;
        animation-delay:.25s;
}
#loader span:nth-child(3){
-webkit-animation-delay:.45s;
   -moz-animation-delay:.45s;
    -ms-animation-delay:.45s;
     -o-animation-delay:.45s;
        animation-delay:.45s;
}
#loader span:nth-child(4){
-webkit-animation-delay:.55s;
   -moz-animation-delay:.55s;
    -ms-animation-delay:.55s;
     -o-animation-delay:.55s;
        animation-delay:.55s;
}
#loader span:nth-child(5){
-webkit-animation-delay:.65s;
   -moz-animation-delay:.65s;
    -ms-animation-delay:.65s;
     -o-animation-delay:.65s;
        animation-delay:.65s;
}
#loader span:nth-child(6){
-webkit-animation-delay:.75s;
   -moz-animation-delay:.75s;
    -ms-animation-delay:.75s;
     -o-animation-delay:.75s;
        animation-delay:.75s;
}
#loader span:nth-child(7){
-webkit-animation-delay:.85s;
   -moz-animation-delay:.85s;
    -ms-animation-delay:.85s;
     -o-animation-delay:.85s;
        animation-delay:.85s;
}
p{
text-align:center;
font-size:30px;
font-family:helvetica neue;
font-weight:100;
color:#fff;
}
a{
color:#7bf;
text-decoration:none;
}

</style>
</head>
<body>
<div id="loader">
    <span>L</span>
    <span>O</span>
    <span>A</span>
    <span>D</span>
    <span>I</span>
    <span>N</span>
    <span>G</span>
</div>

</html>




<html>
<head>
<style>
.loader {
    text-align: center;    
}
.loader span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 50px auto;
    background: black;
    border-radius: 50px;
    -webkit-animation: loader 0.9s infinite alternate;
    -moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}
@-webkit-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -webkit-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -webkit-transform: translateY(-21px);
  }
}
@-moz-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -moz-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -moz-transform: translateY(-21px);
  }
}
</style>
</head>
<body>
<div class="loader">
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
</html>



<html>
<style>
.spinner {
  margin: 100px auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
</style>
<body>
<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>
</body>
</html>

<html>
<style>
.spinner {
  margin: 100px auto;
  width: 32px;
  height: 32px;
  position: relative;
}

.cube1, .cube2 {
  background-color: #333;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: cubemove 1.8s infinite ease-in-out;
  animation: cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}
</style>
<body>
<div class="spinner">
  <div class="cube1"></div>
  <div class="cube2"></div>
</div>
</body>
</html>


<html>
<style>
.spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  
  -webkit-animation: rotate 2.0s infinite linear;
  animation: rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #333;
  border-radius: 100%;
  
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0px;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
</style>
<body>
<div class="spinner">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>
</body>
</html>


<html>
<style>
.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
</style>
<body><div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>
</body>
</html>


<html>
<style>
.spinner {
  margin: 100px auto;
  width: 20px;
  height: 20px;
  position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
  width: 6px;
  height: 6px;
  background-color: #333;

  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

</style>
<body>
<div class="spinner">
  <div class="spinner-container container1">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
  <div class="spinner-container container2">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
  <div class="spinner-container container3">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
</div>
</body>
</html>
© Copyright 2015 5 By 2 - An Associated With XMORI   
Back to Top