CSS3 圆环Loadingアニメーション画<br>#bowlG{<br>position:relative;<br>width:128px;<br>height:128px;<br>}<br>#bowl_ringG{<br>位置:絶対;<br>幅:128px;<br>高さ:128px;<br>ボーダー:11px 実線 #000000;<br>-moz-border-radius:128px;<br>-webkit-border-radius:128px;<br>border-radius:128px;<br> }<br>.ball_holderG{<br>position:absolute;<br>width:34px;<br>height:128px;<br>left:47px;<br>top:0px;<br>-webkit-animation-name:ball_moveG;<br>-webkit-animation-duration:2s; <br>-webkit-animation-iteration-count:infinite;<br>-webkit-animation-timing-function:linear;<br>-moz-animation-name:ball_moveG;<br>-moz-animation-duration:2s;<br>-moz-animation-反復回数:無限;<br>-moz-アニメーションタイミング関数:リニア;<br>-o-アニメーション名:ball_moveG;<br>-o-アニメーション期間:2s;<br>-o-アニメーション反復回数:無限; <br>-o-animation-timing-function:linear;<br>-ms-animation-name:ball_moveG;<br>-ms-animation-duration:2s;<br>-ms-animation-iteration-count:infinite;<br>-ms-animation-タイミング関数:linear;<br>}<br>.ballG{<br>position:absolute;<br>left:0px;<br>top:-30px;<br>width:51px;<br>height:51px;<br>background:#FFFFFF;<br>-moz-border- radius:43px;<br>-webkit-border-radius:43px;<br>border-radius:43px;<br>}<br>@-webkit-keyframes ball_moveG{<br>0%{<br>-webkit-transform:rotate(0deg)}<br>100%{ <br>-webkit-transform:rotate(360deg)}<br>}<br>@-moz-keyframes ball_moveG{<br>0%{<br>-moz-transform:rotate(0deg)}<br>100%{<br>-moz-transform:rotate(360deg) }<br>}<br>@-o-keyframes ball_moveG{<br>0%{<br>-o-transform:rotate(0deg)}<br>100%{<br>-o-transform:rotate(360deg)}<br>}<br>@-ms-keyframes ball_moveG {<br>0%{<br>-ms-transform:rotate(0deg)}<br>100%{<br>-ms-transform:rotate(360deg)}<br>}<br> http://www.999jiujiu.com/
