帶缺口的圓環CSS3 Loading動畫

2024-09-05 12:16:59

字體：大中小

來源：轉載

供稿：網友

CSS3圓環Loading加載動畫，一個帶缺口的圓環在不停的旋轉，寓意網頁正在加載，如果不用CSS3技術，則本效果的實現需要GIF+JavaScript來實現，傳統CSS不支持大部分的網頁動畫。本例可作為你學習CSS3動畫制作的一個小例子吧。

<title>CSS3 圓環Loading動畫</title><style>#bowlG{position:relative;width:128px;height:128px;}#bowl_ringG{position:absolute;width:128px;height:128px;border:11px solid #000000;-moz-border-radius:128px;-webkit-border-radius:128px;border-radius:128px;}.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:#FFFFFF;-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   class="70qarhlowxag"   id="bowlG"><div   class="70qarhlowxag"   id="bowl_ringG"><div   id="70qarhlowxag"   class="ball_holderG"><div   id="70qarhlowxag"   class="ballG"></div></div></div></div>

上一篇：CSS文字溢出添加省略號的代碼

下一篇：超酷的CSS3網頁加載效果