css3实现loading动画效果

通过css3动画实现三种loading加载动画
效果1：通过css3的border-radius与transform的rotate()实现
效果2：通过css3动画animation的animation-delay为负值，则直接从该时间状态进行动画的功能来实现
效果3：通过伪元素::bofore与::after,当animation过渡动画类型为ease时border重叠效果实现

    
    


    body {
 margin: 0px;
 
    }
    .loading {
 width: 100px;
 height: 100px;
 margin: 50px auto;
 border: 8px solid #333;
 border-left: 8px solid red;
 border-radius: 100px;
 -moz-animation: 2s loadings linear infinite;
 -webkit-animation: 2s loadings linear infinite;
 -ms-animation: 2s loading linear infinite;
 animation: 2s loadings linear infinite;
    }
    @-webkit-keyframes loadings {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
    }
    @-moz-keyframes loadings {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
    }
    @-ms-keyframes loadings {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
    }
    @keyframes loadings {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
    }

 .loading1 {
    margin: 0 auto;
    text-align: center;
    font-size: 0;
}
.loading1 .item {
    display: inline-block;
    margin-right: 5px;
    width: 5px;
    height: 45px;
    background-color: #000;
}
.loading1 .loading-item1 {
    -moz-animation: loading-animation 1.2s ease infinite;
    -webkit-animation: loading-animation 1.2s ease infinite;
    animation: loading-animation 1.2s ease infinite;
}
.loading1 .loading-item2 {
    -moz-animation: loading-animation 1.2s ease -1.1s infinite;
    -webkit-animation: loading-animation 1.2s ease -1.1s infinite;
    animation: loading-animation 1.2s ease -1.1s infinite;
}
.loading1 .loading-item3 {
    -moz-animation: loading-animation 1.2s ease -1.0s infinite;
    -webkit-animation: loading-animation 1.2s ease -1.0s infinite;
    animation: loading-animation 1.2s ease -1.0s infinite;
}
.loading1 .loading-item4 {
    -moz-animation: loading-animation 1.2s ease -0.9s infinite;
    -webkit-animation: loading-animation 1.2s ease -0.9s infinite;
    animation: loading-animation 1.2s ease -0.9s infinite;
}
.loading1 .loading-item5 {
    -moz-animation: loading-animation 1.2s ease -0.8s infinite;
    -webkit-animation: loading-animation 1.2s ease -0.8s infinite;
    animation: loading-animation 1.2s ease -0.8s infinite;
}
@-webkit-keyframes loading-animation {
    0%,
    40%,
    100%{
 -webkit-transform: scaleY(0.5);
    }
    20% {
 -webkit-transform: scaleY(1);
    }
}
@-moz-keyframes loading-animation {
    0%,
    40%,
    100%{
 -moz-transform: scaleY(0.5);
    }
    20% {
 -moz-transform: scaleY(1);
    }
}
@-ms-keyframes loading-animation {
    0%,
    40%,
    100%{
 -ms-transform: scaleY(0.5);
    }
    20% {
 -ms-transform: scaleY(1);
    }
}
@keyframes loading-animation {
    0%,
    40%,
    100%{
 transform: scaleY(0.5);
    }
    20% {
 transform: scaleY(1);
    }
}    

 .loading3 {
     position: relative;
     margin: 0 auto;
     width: 100px;
     height: 100px;
     border: 5px solid red;
     border-radius: 50%;
 }
 .loading3::before {
     content: "";
     position: absolute;
     display: inline-block;
     top: -5px;
     left: -5px;
     width: 50px;
     height: 100px;
     border-radius: 150px 0 0 150px;
     border-left: 5px solid black;
     border-bottom: 5px solid black;
     border-top: 5px solid black;
     -webkit-transform-origin: 60px 60px;
     -moz-transform-origin: 60px 60px;
     -ms-transform-origin: 60px 60px;
     transform-origin: 55px 55px;
     -webkit-animation: loading3 4s ease infinite -3s;
     -moz-animation: loading3 4s ease infinite -3s;
     -ms-animation: loading3 4s ease infinite -3s;
     animation: loading3 4s ease infinite -3s;
 }
 .loading3::after {
     content: "";
     position: absolute;
     display: inline-block;
     top: -5px;
     left: 50px;
     width: 50px;
     height: 100px;
     border-radius: 0 150px 150px 0;
     border-top: 5px solid black;
     border-right: 5px solid black;
     border-bottom: 5px solid black;
     -webkit-transform-origin: 0;
     -moz-transform-origin: 0;
     -ms-transform-origin: 0;
     transform-origin: 0;
     -webkit-animation: loading3 4s ease infinite;
     -moz-animation: loading3 4s ease infinite;
     -ms-animation: loading3 4s ease infinite;
     animation: loading3 4s ease infinite;
 }
 @-webkit-keyframes loading3 {
     0%{
  -webkit-transform: rotate(0);
     }
     100% {
  -webkit-transform: rotate(360deg);
     }
 }
 @-moz-keyframes loading3 {
     0%{
  -moz-transform: rotate(0);
     }
     100% {
  -moz-transform: rotate(360deg);
     }
 }
 @-ms-keyframes loading3 {
     0%{
  -ms-transform: rotate(0);
     }
     100% {
  -ms-transform: rotate(360deg);
     }
 }
 @keyframes loading3 {
     0%{
  transform: rotate(0);
     }
     100% {
  transform: rotate(360deg);
     }
 }