CSS3绘制的圆环绕行Loading动画

此代码仅供参考

---

代码说明

CSS3圆环Loading加载动画，一个带缺口的圆环在不停的旋转，寓意网页正在加载，如果不用CSS3技术，则本效果的实现需要GIF+JavaScript来实现，传统CSS不支持大部分的网页动画。

---

html代码

<style> #bowlG{ position:relative; width:128px; height:128px; display:inline-block; } #bowlG span{ position:relative; top:48px; font-size:32px; font-family:"微软雅黑"; color:red; text-shadow:1px 2px 8px #f5f5f5; } #bowl_ringG{ position:absolute; width:128px; height:128px; border:11px solid #000000; -moz-border-radius:128px; -webkit-border-radius:128px; border-radius:128px; box-shadow:inset 2px 2px 10px green; } .ball_holderG{ position:absolute; width:34px; height:128px; left:47px; top:0px; -webkit-animation-name:ball_moveG; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -moz-animation-name:ball_moveG; -moz-animation-duration:2s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; -o-animation-name:ball_moveG; -o-animation-duration:2s; -o-animation-iteration-count:infinite; -o-animation-timing-function:linear; -ms-animation-name:ball_moveG; -ms-animation-duration:2s; -ms-animation-iteration-count:infinite; -ms-animation-timing-function:linear; } .ballG{ position:absolute; left:0px; top:-30px; width:51px; height:51px; background:#F3F3F3; -moz-border-radius:43px; -webkit-border-radius:43px; border-radius:43px; } @-webkit-keyframes ball_moveG{ 0%{ -webkit-transform:rotate(0deg)} 100%{ -webkit-transform:rotate(360deg)} } @-moz-keyframes ball_moveG{ 0%{ -moz-transform:rotate(0deg)} 100%{ -moz-transform:rotate(360deg)} } @-o-keyframes ball_moveG{ 0%{ -o-transform:rotate(0deg)} 100%{ -o-transform:rotate(360deg)} } @-ms-keyframes ball_moveG{ 0%{ -ms-transform:rotate(0deg)} 100%{ -ms-transform:rotate(360deg)} } </style> <div id="bowlG"> <div id="bowl_ringG"> <span>加载中</span> <div class="ball_holderG"> <div class="ballG"></div> </div> </div> </div>

---

代码演示

---

---