masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > 纯CSS3制作超级漂亮又实用的加载小图标

纯CSS3制作超级漂亮又实用的加载小图标

高洛峰
Lepaskan： 2016-10-14 15:32:05
asal
2098 orang telah melayarinya

先来一张各种效果的预览图，其实代码并不复杂，关键看自己如何运用。

1.png

<!doctype html>
<head>
<meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="demo.css"/>
    <link rel="stylesheet" type="text/css" href="loaders.css"/>
    <title>css3炫酷页面加载动画特效代码 </title>
</head>
<body>
  <main>
    <div class="loaders">
      <div class="loader">
        <div class="loader-inner ball-pulse">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-grid-pulse">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-clip-rotate">
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-clip-rotate-pulse">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner square-spin">
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-clip-rotate-multiple">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-pulse-rise">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-rotate">
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner cube-transition">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-zig-zag">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-zig-zag-deflect">
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-triangle-path">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-scale">
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner line-scale">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner line-scale-party">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-scale-multiple">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-pulse-sync">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-beat">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner line-scale-pulse-out">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner line-scale-pulse-out-rapid">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-scale-ripple">
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-scale-ripple-multiple">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-spin-fade-loader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner line-spin-fade-loader">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner triangle-skew-spin">
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner ball-grid-beat">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="loader">
        <div class="loader-inner semi-circle-spin">
          <div></div>
        </div>
      </div>
    </div>
  </main>
  <script>
    document.addEventListener(&#39;DOMContentLoaded&#39;, function () {
      document.querySelector(&#39;main&#39;).className += &#39;loaded&#39;;
    });
  </script>


</body>
</html>
Salin selepas log masuk

css：demo

/**
*
*
*/
html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    font-size: 16px;
    background: #000;
    color: #fff;
    font-family: &#39;Source Sans Pro&#39;; 
}

h1 {
    font-size: 2.8em;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0.6rem 0; 
}
h1 > span {font-weight: 300; }
h2 {
    font-size: 1.15em;
    font-weight: 300;
    margin: 0.3rem 0; 
}
main {
    width: 95%;
    max-width: 1000px;
    margin: 4em auto;
    opacity: 0; 
}
main.loaded {transition: opacity .25s linear;opacity: 1; }
main header {width: 100%; }
main header > div {width: 50%; }
main header > .left, main header > .right {height: 100%; }
main .loaders {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
}
main .loaders .loader {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 25%;
    max-width: 25%;
    height: 200px;
    align-items: center;
    justify-content: center;
}
Salin selepas log masuk

css：loaders

/**
 *
 * All animations must live in their own file
 * in the animations directory and be included
 * here.
 *
 */
/**
 * Styles shared by multiple animations
 */
@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }

  45% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 0.7; }

  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }
@keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }

  45% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 0.7; }

  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

.ball-pulse > div:nth-child(0) {
  -webkit-animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(1) {
  -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(2) {
  -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(3) {
  -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }

@-webkit-keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); }

  66% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes ball-pulse-sync {
  33% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); }

  66% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

.ball-pulse-sync > div:nth-child(0) {
  -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
          animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(1) {
  -webkit-animation: ball-pulse-sync 0.6s 0.07s infinite ease-in-out;
          animation: ball-pulse-sync 0.6s 0.07s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(2) {
  -webkit-animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out;
          animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(3) {
  -webkit-animation: ball-pulse-sync 0.6s 0.21s infinite ease-in-out;
          animation: ball-pulse-sync 0.6s 0.21s infinite ease-in-out; }
.ball-pulse-sync > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }

@-webkit-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

.ball-scale > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  height: 60px;
  width: 60px;
  -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
          animation: ball-scale 1s 0s ease-in-out infinite; }

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

  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg); }

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

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

  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg); }

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

.ball-rotate {
  position: relative; }
  .ball-rotate > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: relative; }
    .ball-rotate > div:first-child {
      -webkit-animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
              animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite; }
    .ball-rotate > div:before, .ball-rotate > div:after {
      background-color: #fff;
      width: 15px;
      height: 15px;
      border-radius: 100%;
      margin: 2px;
      content: "";
      position: absolute;
      opacity: 0.8; }
    .ball-rotate > div:before {
      top: 0px;
      left: -28px; }
    .ball-rotate > div:after {
      top: 0px;
      left: 25px; }

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1); }

  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6); }

  100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1); } }

.ball-clip-rotate > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  border: 2px solid #fff;
  border-bottom-color: transparent;
  height: 25px;
  width: 25px;
  background: transparent !important;
  display: inline-block;
  -webkit-animation: rotate 0.75s 0s linear infinite;
          animation: rotate 0.75s 0s linear infinite; }

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1); }

  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6); }

  100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1); } }

@keyframes scale {
  30% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3); }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

.ball-clip-rotate-pulse {
  position: relative;
  -webkit-transform: translateY(-15px);
      -ms-transform: translateY(-15px);
          transform: translateY(-15px); }
  .ball-clip-rotate-pulse > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 100%; }
    .ball-clip-rotate-pulse > div:first-child {
      background: #fff;
      height: 16px;
      width: 16px;
      top: 9px;
      left: 9px;
      -webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
              animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite; }
    .ball-clip-rotate-pulse > div:last-child {
      position: absolute;
      border: 2px solid #fff;
      width: 30px;
      height: 30px;
      background: transparent;
      border: 2px solid;
      border-color: #fff transparent #fff transparent;
      -webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
              animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
      -webkit-animation-duration: 1s;
              animation-duration: 1s; }

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1); }

  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6); }

  100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1); } }

.ball-clip-rotate-multiple {
  position: relative; }
  .ball-clip-rotate-multiple > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    left: 0px;
    top: 0px;
    border: 2px solid #fff;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-radius: 100%;
    height: 35px;
    width: 35px;
    -webkit-animation: rotate 1s 0s ease-in-out infinite;
            animation: rotate 1s 0s ease-in-out infinite; }
    .ball-clip-rotate-multiple > div:last-child {
      display: inline-block;
      top: 10px;
      left: 10px;
      width: 15px;
      height: 15px;
      -webkit-animation-duration: 0.5s;
              animation-duration: 0.5s;
      border-color: #fff transparent #fff transparent;
      -webkit-animation-direction: reverse;
              animation-direction: reverse; }

@-webkit-keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }

  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }

  100% {
    opacity: 0.0; } }

@keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }

  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }

  100% {
    opacity: 0.0; } }

.ball-scale-ripple > div {
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  border: 2px solid #fff;
  -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8);
          animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8); }

@-webkit-keyframes ball-scale-ripple-multiple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }

  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }

  100% {
    opacity: 0.0; } }

@keyframes ball-scale-ripple-multiple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }

  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }

  100% {
    opacity: 0.0; } }

.ball-scale-ripple-multiple {
  position: relative;
  -webkit-transform: translateY(-25px);
      -ms-transform: translateY(-25px);
          transform: translateY(-25px); }
  .ball-scale-ripple-multiple > div:nth-child(0) {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s; }
  .ball-scale-ripple-multiple > div:nth-child(1) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s; }
  .ball-scale-ripple-multiple > div:nth-child(2) {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
  .ball-scale-ripple-multiple > div:nth-child(3) {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s; }
  .ball-scale-ripple-multiple > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 2px solid #fff;
    -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
            animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8); }

@-webkit-keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
            transform: scale(0.75); }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
            transform: scale(0.75); }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

.ball-beat > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: ball-beat 0.7s 0s infinite linear;
          animation: ball-beat 0.7s 0s infinite linear; }
  .ball-beat > div:nth-child(2n-1) {
    -webkit-animation-delay: 0.35s !important;
            animation-delay: 0.35s !important; }

@-webkit-keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }

  5% {
    opacity: 1; }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }

  5% {
    opacity: 1; }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

.ball-scale-multiple {
  position: relative;
  -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
          transform: translateY(-30px); }
  .ball-scale-multiple > div:nth-child(2) {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
  .ball-scale-multiple > div:nth-child(3) {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s; }
  .ball-scale-multiple > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
            animation: ball-scale-multiple 1s 0s linear infinite; }

@-webkit-keyframes ball-triangle-path-1 {
  33% {
    -webkit-transform: translate(25px, -50px);
            transform: translate(25px, -50px); }

  66% {
    -webkit-transform: translate(50px, 0px);
            transform: translate(50px, 0px); }

  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@keyframes ball-triangle-path-1 {
  33% {
    -webkit-transform: translate(25px, -50px);
            transform: translate(25px, -50px); }

  66% {
    -webkit-transform: translate(50px, 0px);
            transform: translate(50px, 0px); }

  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@-webkit-keyframes ball-triangle-path-2 {
  33% {
    -webkit-transform: translate(25px, 50px);
            transform: translate(25px, 50px); }

  66% {
    -webkit-transform: translate(-25px, 50px);
            transform: translate(-25px, 50px); }

  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@keyframes ball-triangle-path-2 {
  33% {
    -webkit-transform: translate(25px, 50px);
            transform: translate(25px, 50px); }

  66% {
    -webkit-transform: translate(-25px, 50px);
            transform: translate(-25px, 50px); }

  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@-webkit-keyframes ball-triangle-path-3 {
  33% {
    -webkit-transform: translate(-50px, 0px);
            transform: translate(-50px, 0px); }

  66% {
    -webkit-transform: translate(-25px, -50px);
            transform: translate(-25px, -50px); }

  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

@keyframes ball-triangle-path-3 {
  33% {
    -webkit-transform: translate(-50px, 0px);
            transform: translate(-50px, 0px); }

  66% {
    -webkit-transform: translate(-25px, -50px);
            transform: translate(-25px, -50px); }

  100% {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

.ball-triangle-path {
  position: relative;
  -webkit-transform: translate(-25px, -25px);
      -ms-transform: translate(-25px, -25px);
          transform: translate(-25px, -25px); }
  .ball-triangle-path > div:nth-child(1) {
    -webkit-animation-name: ball-triangle-path-1;
            animation-name: ball-triangle-path-1;
    -webkit-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; }
  .ball-triangle-path > div:nth-child(2) {
    -webkit-animation-name: ball-triangle-path-2;
            animation-name: ball-triangle-path-2;
    -webkit-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; }
  .ball-triangle-path > div:nth-child(3) {
    -webkit-animation-name: ball-triangle-path-3;
            animation-name: ball-triangle-path-3;
    -webkit-animation-delay: 0;
            animation-delay: 0;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; }
  .ball-triangle-path > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 1px solid #fff; }
    .ball-triangle-path > div:nth-of-type(1) {
      top: 50px; }
    .ball-triangle-path > div:nth-of-type(2) {
      left: 25px; }
    .ball-triangle-path > div:nth-of-type(3) {
      top: 50px;
      left: 50px; }

@-webkit-keyframes ball-pulse-rise-even {
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }

  25% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px); }

  50% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }

  75% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px); }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes ball-pulse-rise-even {
  0% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }

  25% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px); }

  50% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }

  75% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px); }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform: scale(1);
            transform: scale(1); } }

@-webkit-keyframes ball-pulse-rise-odd {
  0% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }

  25% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px); }

  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }

  75% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px); }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform: scale(0.75);
            transform: scale(0.75); } }

@keyframes ball-pulse-rise-odd {
  0% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }

  25% {
    -webkit-transform: translateY(30px);
            transform: translateY(30px); }

  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1); }

  75% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px); }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform: scale(0.75);
            transform: scale(0.75); } }

.ball-pulse-rise > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(.15, .46, .9, .6);
          animation-timing-function: cubic-bezier(.15, .46, .9, .6);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-delay: 0;
          animation-delay: 0; }
  .ball-pulse-rise > div:nth-child(2n) {
    -webkit-animation-name: ball-pulse-rise-even;
            animation-name: ball-pulse-rise-even; }
  .ball-pulse-rise > div:nth-child(2n-1) {
    -webkit-animation-name: ball-pulse-rise-odd;
            animation-name: ball-pulse-rise-odd; }

@-webkit-keyframes ball-grid-beat {
  50% {
    opacity: 0.7; }

  100% {
    opacity: 1; } }

@keyframes ball-grid-beat {
  50% {
    opacity: 0.7; }

  100% {
    opacity: 1; } }

.ball-grid-beat {
  width: 57px; }
  .ball-grid-beat > div:nth-child(1) {
    -webkit-animation-delay: 0.36s;
            animation-delay: 0.36s;
    -webkit-animation-duration: 0.96s;
            animation-duration: 0.96s; }
  .ball-grid-beat > div:nth-child(2) {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
    -webkit-animation-duration: 0.93s;
            animation-duration: 0.93s; }
  .ball-grid-beat > div:nth-child(3) {
    -webkit-animation-delay: 0.68s;
            animation-delay: 0.68s;
    -webkit-animation-duration: 1.19s;
            animation-duration: 1.19s; }
  .ball-grid-beat > div:nth-child(4) {
    -webkit-animation-delay: 0.41s;
            animation-delay: 0.41s;
    -webkit-animation-duration: 1.13s;
            animation-duration: 1.13s; }
  .ball-grid-beat > div:nth-child(5) {
    -webkit-animation-delay: 0.71s;
            animation-delay: 0.71s;
    -webkit-animation-duration: 1.34s;
            animation-duration: 1.34s; }
  .ball-grid-beat > div:nth-child(6) {
   &nbs
Salin selepas log masuk
Label berkaitan：
纯CSS3制作超级漂亮又实用的加载小图标
Artikel sebelumnya：css3 3d效果及动画学习 Artikel seterusnya：邂逅Sass和Compass之Sass篇
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
javascript - Sila beritahu saya tentang masalah menukar fungsi panggil balik jq untuk menjanjikan pelaksanaan
daripada 1970-01-01 08:00:00
0
0
0
javascript - Kekeliruan tentang menghantar parameter dalam tindak balas
daripada 1970-01-01 08:00:00
0
0
0
javascript - gambar rajah tindanan atribut js
daripada 1970-01-01 08:00:00
0
0
0
javascript - aplikasi halaman tunggal angularjs Bagaimana untuk menyelesaikan masalah tidak menatal ke bahagian atas halaman selepas halaman menatal ke bawah dan navigasi melompat ke halaman baharu?
daripada 1970-01-01 08:00:00
0
0
0
javascript - Apabila membina projek dengan vue-cli, anda perlu memperkenalkan fail js dan CSS statik tempatan Bagaimana untuk membungkusnya?
daripada 1970-01-01 08:00:00
0
0
0
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan