你能相信吗？这些都是由一个DIV元素实现的动画，纯CSS3技术

html

<div class="loader">加载中...</div>

css: 图（1）

.loader, .loader:before, .loader:after {

background: #FFF;

-webkit-animation: load1 1s infinite ease-in-out;

animation: load1 1s infinite ease-in-out;

width: 1em;

height: 4em;

}

.loader:before,

.loader:after {

position: absolute;

top:;

content: '';

}

.loader:before {

left: -1.5em;

}

.loader {

text-indent: -9999em;

margin: 40% auto;

position: relative;

font-size: 11px;

-webkit-animation-delay: 0.16s;

animation-delay: 0.16s;

}

.loader:after { left: 1.5em;

-webkit-animation-delay: 0.32s;

animation-delay: 0.32s;

}

@-webkit-keyframes load1 {

0%,

80%,

100% {

box-shadow: 0 0 #FFF;

height: 4em;

}

40% {

box-shadow: 0 -2em #ffffff;

height: 5em;

}

}

@keyframes load1 {

0%,

80%,

100% {

box-shadow: 0 0 #FFF;

height: 4em;

}

40% {

box-shadow: 0 -2em #ffffff;

height: 5em;

}

}

图（2）

.loader,

.loader:before,

.loader:after {

  border-radius: 50%;

}

.loader:before,

.loader:after {

  position: absolute;

  content: '';

}

.loader:before {

  width: 5.2em;

  height: 10.2em;

  background: #0dcecb;

  border-radius: 10.2em 0 0 10.2em;

  top: -0.1em;

  left: -0.1em;

  -webkit-transform-origin: 5.2em 5.1em;

  transform-origin: 5.2em 5.1em;

  -webkit-animation: load2 2s infinite ease 1.5s;

  animation: load2 2s infinite ease 1.5s;

}

.loader {

  font-size: 11px;

  text-indent: -99999em;

  margin: 30% auto;

  position: relative;

  width: 10em;

  height: 10em;

  box-shadow: inset 0 0 0 1em #FFF;

}

.loader:after {

  width: 5.2em;

  height: 10.2em;

  background: #0dcecb;

  border-radius: 0 10.2em 10.2em 0;

  top: -0.1em;

  left: 5.1em;

  -webkit-transform-origin: 0px 5.1em;

  transform-origin: 0px 5.1em;

  -webkit-animation: load2 2s infinite ease;

  animation: load2 2s infinite ease;

}

@-webkit-keyframes load2 {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}

@keyframes load2 {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}

图(3)

.loader {

  font-size: 10px;

  margin: 30% auto;

  text-indent: -9999em;

  width: 11em;

  height: 11em;

  border-radius: 50%;

  background: #ffffff;

  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);

  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);

  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);

  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);

  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);

  position: relative;

  -webkit-animation: load3 1.4s infinite linear;

  animation: load3 1.4s infinite linear;

}

.loader:before {

  width: 50%;

  height: 50%;

  background: #FFF;

  border-radius: 100% 0 0 0;

  position: absolute;

  top:;

  left:;

  content: '';

}

.loader:after {

  background: #0dcecb;

  width: 75%;

  height: 75%;

  border-radius: 50%;

  content: '';

  margin: auto;

  position: absolute;

  top:;

  left:;

  bottom:;

  right:;

}

@-webkit-keyframes load3 {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}

@keyframes load3 {

  0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

  }

  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }

}

图(4)

.load4

 .loader {

  font-size: 20px;

  margin: 45% auto;

  width: 1em;

  height: 1em;

  border-radius: 50%;

  position: relative;

  text-indent: -9999em;

  -webkit-animation: load4 1.3s infinite linear;

  animation: load4 1.3s infinite linear;

}

@-webkit-keyframes load4 {

  0%,

  100% {

    box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em

0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em

#ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em

 0 0em #ffffff;

  }

  12.5% {

    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em

0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff,

-2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em

 #ffffff;

  }

  25% {

    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em

 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff,

-2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em

 #ffffff;

  }

  37.5% {

    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,

3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff,

-2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em

 #ffffff;

  }

  50% {

    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,

3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em

#ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0

-0.5em #ffffff;

  }

  62.5% {

    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,

3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em

#ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0

-0.5em #ffffff;

  }

  75% {

    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,

3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em

#ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0

0em #ffffff;

  }

  87.5% {

    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em

 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em

#ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0

0.2em #ffffff;

  }

}

@keyframes load4 {

  0%,

  100% {

    box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em

0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em

#ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em

 0 0em #ffffff;

  }

  12.5% {

    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em

0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff,

-2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em

 #ffffff;

  }

  25% {

    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em

 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff,

-2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em

 #ffffff;

  }

  37.5% {

    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,

3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff,

-2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em

 #ffffff;

  }

  50% {

    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,

3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em

#ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0

-0.5em #ffffff;

  }

  62.5% {

    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,

3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em

#ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0

-0.5em #ffffff;

  }

  75% {

    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff,

3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em

#ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0

0em #ffffff;

  }

  87.5% {

    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em

 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em

#ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0

0.2em #ffffff;

  }

}

图(5)

.load5

.loader {

margin: 46% auto;

font-size: 25px;

width: 1em;

height: 1em;

border-radius: 50%;

position: relative;

text-indent: -9999em;

-webkit-animation: load5 1.1s infinite ease;

animation: load5 1.1s infinite ease;

}

@-webkit-keyframes load5 {

0%,

100% {

box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,

255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em

0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255,

0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em

rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);

}

12.5% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em

-1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em

1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255,

255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em

rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);

}

25% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em

-1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em

1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255,

255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em

rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);

}

37.5% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em

-1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255,

255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em

rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),

-2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255,

255, 255, 0.2);

}

50% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em

-1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,

255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em

#ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em

rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);

}

62.5% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em

-1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,

255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em

rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em

rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);

}

75% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em

-1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,

255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em

rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),

-2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);

}

87.5% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em

-1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,

255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em

rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),

-2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;

}

}

@keyframes load5 {

0%,

100% {

box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,

255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em

0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255,

0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em

rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);

}

12.5% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em

-1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em

1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255,

255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em

rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);

}

25% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em

-1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em

1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255,

255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em

rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);

}

37.5% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em

-1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255,

255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em

rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),

-2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255,

255, 255, 0.2);

}

50% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em

-1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,

255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em

#ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em

rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);

}

62.5% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em

-1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,

255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em

rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em

rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);

}

75% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em

-1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,

255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em

rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),

-2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);

}

87.5% {

box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em

-1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255,

255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em

rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),

-2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;

}

}

图(6)

.loader

{

font-size: 90px;

text-indent: -9999em;

overflow: hidden;

width: 1em;

height: 1em;

border-radius: 50%;

margin: 33% auto;

position: relative;

-webkit-animation: load6 1.7s infinite ease;

animation: load6 1.7s infinite ease;

}

@-webkit-keyframes load6 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0

-0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0

-0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

}

5%,

95% {

box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0

-0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0

-0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

}

30% {

box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0

-0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0

-0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;

}

55% {

box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0

-0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0

-0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0

-0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0

-0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

}

}

@keyframes load6 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0

-0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0

-0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

}

5%,

95% {

box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0

-0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0

-0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

}

30% {

box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.51em -0.66em 0

-0.42em #ffffff, -0.75em -0.36em 0 -0.44em #ffffff, -0.83em -0.03em 0

-0.46em #ffffff, -0.81em 0.21em 0 -0.477em #ffffff;

}

55% {

box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.29em -0.78em 0

-0.42em #ffffff, -0.43em -0.72em 0 -0.44em #ffffff, -0.52em -0.65em 0

-0.46em #ffffff, -0.57em -0.61em 0 -0.477em #ffffff;

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

box-shadow: -0.11em -0.83em 0 -0.4em #ffffff, -0.11em -0.83em 0

-0.42em #ffffff, -0.11em -0.83em 0 -0.44em #ffffff, -0.11em -0.83em 0

-0.46em #ffffff, -0.11em -0.83em 0 -0.477em #ffffff;

}

}

图(7)

.loader:before,

.loader:after,

.loader {

border-radius: 50%;

width: 2.5em;

height: 2.5em;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

-webkit-animation: load7 1.8s infinite ease-in-out;

animation: load7 1.8s infinite ease-in-out;

}

.loader {

margin: 8em auto;

font-size: 10px;

position: relative;

text-indent: -9999em;

-webkit-animation-delay: 0.16s;

animation-delay: 0.16s;

}

.loader:before {

left: -3.5em;

}

.loader:after {

left: 3.5em;

-webkit-animation-delay: 0.32s;

animation-delay: 0.32s;

}

.loader:before,

.loader:after {

content: '';

position: absolute;

top:;

}

@-webkit-keyframes load7 {

0%,

80%,

100% {

box-shadow: 0 2.5em 0 -1.3em #ffffff;

}

40% {

box-shadow: 0 2.5em 0 0 #FFF;

}

}

@keyframes load7 {

0%,

80%,

100% {

box-shadow: 0 2.5em 0 -1.3em #ffffff;

}

40% {

box-shadow: 0 2.5em 0 0 #FFF;

}

}

图(8)

.loader {

margin: 6em auto;

font-size: 10px;

position: relative;

text-indent: -9999em;

border-top: 1.1em solid rgba(255, 255, 255, 0.2);

border-right: 1.1em solid rgba(255, 255, 255, 0.2);

border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);

border-left: 1.1em solid #ffffff;

-webkit-animation: load8 1.1s infinite linear;

animation: load8 1.1s infinite linear;

}

.loader,

.loader:after {

border-radius: 50%;

width: 10em;

height: 10em;

}

@-webkit-keyframes load8 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes load8 {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

纯CSS3技术加载中的更多相关文章

css3动画-加载中...
写几个简单的加载中动画吧. 像前面三种都是相当于几个不同的点轮流来播放同一动画:变大变小.css3里面有一个用于尺度变换的方法:scale(x,y):定义 2D 缩放转换,改变元素的宽度和高度. 第四 ...
CSS3实现加载中的动画效果
本篇文章由:http://xinpure.com/css3-implementations-of-loading-an-animation-effect/ Loading 的菊花图形组合的不太好,基本 ...
CSS3实现加载中效果
代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <tit ...
用纯CSS实现加载中动画效果
HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut&quo ...
css3加载中
.loader { margin: 6em auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1 ...
基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
WebView 一直展示加载中。。。
webview加载html5页面总是一直在加载中,加载很慢或干脆加载不出来, 听浏览器的大牛说可能是 js导致的,尝试在onpause里加入mWebView.pauseTimers(), onResu ...

随机推荐

navicat导入mysql数据库sql时报错
今天运维的一个项目需要进入数据库修改下数据,MYSQL的数据库,我先导出了一份数据结构和数据,然后进行修改,改完后发现项目报错了...粗心大意哪改错了,赶紧恢复数据库,结果导入SQL时报错了,当时心凉 ...
Java 枚举随笔
public enum Color{ //定义枚举并赋值 RED("红色", 1), Blue("蓝色", 2), Yellow("黄色", ...
HTML5 JavaScript 文件上传
function fileUpload(targetUrl) { // 隐藏表单名称 var inputName = '_fileselect'; // 文件尺寸 this.fileSize = 0; ...
MVC WEB api 自动生成文档
最近在一直在用webapi做接口给移动端用.但是让我纠结的时候每次新加接口或者改动接口的时候,就需要重新修改文档这让我很是苦恼.无意中发现.webapi居然有自动生成文档的功能....真是看见了救星啊 ...
Dropdownlist的onchange事件应用
function selectDpList(dp) { var sIndex = dp.selectedIndex;//返回选中是第几项 0,1.... var sText = dp.options[ ...
段（SEGMENT）
伪指令SEGMENT被用来声明一个普通段.一个再定位类型(relocation type)和一个地址分配类型(allocation type)可以按如下形式指明: segment SEGMENT cl ...
TextReader/TextWriter 的类
TextReader以及TextWriter这两个类,非常有用,很多方法都接受它们作为参数. TextReader有两个子类: StringReader/StringWriter 用于读取字符串: S ...
在WPF中使用ArcGIS Engine
原文 http://blog.csdn.net/zzahkj/article/details/9102621 1.首先,新建一个WPF项目,添加引用ESRI.ArcGIS.AxControls.ESR ...
zend studio使用入门
使用zend studio8建立项目使用PHP开发工具zend studio8进行PHP网站开发,就需要建立(导入)相应的项目,方法如下:右键左侧Workspace,选择New | PHP Proj ...
8个华丽的HTML5相册动画欣赏
HTML5的图片动画非常丰富,我们也在网站上分享过很多关于HTML5的图片动画.相册在网络中也十分常见,本文我们要分享一些比较华丽的jQuery/HTML5相册动画,希望大家喜欢. 1.HTML5 3 ...

纯CSS3技术 加载中

你能相信吗？这些都是由一个DIV元素实现的动画，纯CSS3技术

纯CSS3技术 加载中的更多相关文章

随机推荐

热门专题

纯CSS3技术加载中

纯CSS3技术加载中的更多相关文章