NNNの博客

加载旋转

今天准备用一个div,和before,after伪类,通过css动画完成加载旋转的效果。
@-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);
      }
}
以上就是动画的代码,原理就是让div的before和after伪类进行上述动画,并让其中一个延迟动画几s,变会出现两个圆交替旋转的现象,怎么样,很简单吧~下面上css代码。
<style>
    /*body{
    background-color: #0dcecb;
    }*/
    .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 yellow;
    }
    .loader:after {
          width: 5.2em;
          height: 10.2em;
          background: red;
          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);
          }
    }
</style>
以上就是今天的加载旋转小分享,等有时间再和大家分享另一种加载旋转效果~