本文运用CSS3的旋转Transform属性和动画的执行百分比制作而成，很特别的CSS3实现粒子旋转伸缩加载动画，具体内容如下
CSS Code复制内容到剪贴板
#loader6{margin:60px50px;float:left;font-size:90px;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;position:relative;-webkit-animation:load61.7sinfiniteease;animation:load61.7sinfiniteease;}@-webkit-keyframesload6{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,-0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,-0.11em-0.83em0-0.477em#ff0000;}5%,95%{box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,-0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,-0.11em-0.83em0-0.477em#ff0000;}30%{box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.51em-0.66em0-0.42em#ff0000,-0.75em-0.36em0-0.44em#ff0000,-0.83em-0.03em0-0.46em#ff0000,-0.81em0.21em0-0.477em#ff0000;}55%{box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.29em-0.78em0-0.42em#ff0000,-0.43em-0.72em0-0.44em#ff0000,-0.52em-0.65em0-0.46em#ff0000,-0.57em-0.61em0-0.477em#ff0000;}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,-0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,-0.11em-0.83em0-0.477em#ff0000;}}@keyframesload6{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,-0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,-0.11em-0.83em0-0.477em#ff0000;}5%,95%{box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,-0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,-0.11em-0.83em0-0.477em#ff0000;}30%{box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.51em-0.66em0-0.42em#ff0000,-0.75em-0.36em0-0.44em#ff0000,-0.83em-0.03em0-0.46em#ff0000,-0.81em0.21em0-0.477em#ff0000;}55%{box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.29em-0.78em0-0.42em#ff0000,-0.43em-0.72em0-0.44em#ff0000,-0.52em-0.65em0-0.46em#ff0000,-0.57em-0.61em0-0.477em#ff0000;}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,-0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,-0.11em-0.83em0-0.477em#ff0000;}}以上就是本文的全部内容，希望对大家学习CSS样式编写有所帮助，制作出更多精彩的加载动画效果。
