一组舒服的 css 加载动画

   <pre>  <code class="language-html"><div class="spinner"></div>    .spinner {    width: 40px;    height: 40px;    background-color: #333;      margin: 100px auto;    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;    animation: sk-rotateplane 1.2s infinite ease-in-out;  }    @-webkit-keyframes sk-rotateplane {    0% { -webkit-transform: perspective(120px) }    50% { -webkit-transform: perspective(120px) rotateY(180deg) }    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }  }    @keyframes sk-rotateplane {    0% {       transform: perspective(120px) rotateX(0deg) rotateY(0deg);      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)     } 50% {       transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)     } 100% {       transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);    }  }</code></pre>    <pre>  <code><div class="spinner">    <div class="double-bounce1"></div>    <div class="double-bounce2"></div>  </div>  .spinner {    width: 40px;    height: 40px;      position: relative;    margin: 100px auto;  }    .double-bounce1, .double-bounce2 {    width: 100%;    height: 100%;    border-radius: 50%;    background-color: #333;    opacity: 0.6;    position: absolute;    top: 0;    left: 0;        -webkit-animation: sk-bounce 2.0s infinite ease-in-out;    animation: sk-bounce 2.0s infinite ease-in-out;  }    .double-bounce2 {    -webkit-animation-delay: -1.0s;    animation-delay: -1.0s;  }    @-webkit-keyframes sk-bounce {    0%, 100% { -webkit-transform: scale(0.0) }    50% { -webkit-transform: scale(1.0) }  }    @keyframes sk-bounce {    0%, 100% {       transform: scale(0.0);      -webkit-transform: scale(0.0);    } 50% {       transform: scale(1.0);      -webkit-transform: scale(1.0);    }  }</code></pre>    <p> </p>