CSS3实现粒子旋转伸缩加载动画

本文运用CSS3的旋转Transform属性和动画的执行百分比制作而成，很特别的CSS3实现粒子旋转伸缩加载动画，具体内容如下
 

CSS Code 复制内容到剪贴板

#loader6 {
  margin: 60px 50px;
  float: left;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  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 #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
                  -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
                  -0.11em -0.83em 0 -0.477em #ff0000;
      }
    5%,
    95% {
      box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
                  -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
                  -0.11em -0.83em 0 -0.477em #ff0000;
    }
    30% {
      box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,
                  -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,
                  -0.81em 0.21em 0 -0.477em #ff0000;
    }
    55% {
      box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,
                  -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,
                  -0.57em -0.61em 0 -0.477em #ff0000;
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
      box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
                  -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
                  -0.11em -0.83em 0 -0.477em #ff0000;
    }
 }
@keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
                -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
                -0.11em -0.83em 0 -0.477em #ff0000;
    }
  5%,
  95% {
    box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
                -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
                -0.11em -0.83em 0 -0.477em #ff0000;
  }
  30% {
    box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,
                -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,
                -0.81em 0.21em 0 -0.477em #ff0000;
  }
  55% {
    box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,
                -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,
                -0.57em -0.61em 0 -0.477em #ff0000;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
                -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
                -0.11em -0.83em 0 -0.477em #ff0000;
  }
}

以上就是本文的全部内容，希望对大家学习CSS样式编写有所帮助，制作出更多精彩的加载动画效果。