带缺口的圆环CSS3 Loading动画

2020-01-27 14:19:47

字体：大中小

来源：转载

供稿：网友

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 id="bowlG"><div id="bowl_ringG"><div class="ball_holderG"><div class="ballG"></div></div></div></div>

上一篇：超酷的CSS3网页加载效果

下一篇：CSS文字溢出添加省略号的代码

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注