本文运用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样式编写有所帮助，制作出更多精彩的加载动画效果。
【CSS3实现粒子旋转伸缩加载动画】相关文章：