使用CSS3制作loading效果»LaoZhuHome Beta

使用CSS3制作loading效果

星期五, 一月 13th, 2012 前端笔记热度：120 ℃7 条吐槽阅读模式

这个效果提取自Sencha Touch框架，也是在sencha touch的项目中偶然发现loading效果竟然是用纯css3写的，于是提取了出来供各位童鞋一同研究.

使用了keyframes来使动画反复循环，在webkit内核浏览器下表现的很好，目前是webkit only，火狐也请绕道吧。

下面放主要代码和demo，一demo胜千言啊。

主要样式：

 .x-loading-spinner{font-size:250%;height:1em;width:1em;position:relative;-webkit-transform-origin:0.5em 0.5em}
 .x-loading-spinner > span,.x-loading-spinner > span:before,.x-loading-spinner > span:after{display:block;position:absolute;width:0.1em;height:0.25em;top:0;-webkit-transform-origin:0.05em 0.5em;-webkit-border-radius:0.05em;border-radius:0.05em;content:" "}
 .x-loading-spinner > span.x-loading-top{background-color:rgba(170, 170, 170, 0.99)}
 .x-loading-spinner > span.x-loading-top::after{background-color:rgba(170, 170, 170, 0.9)}
 .x-loading-spinner > span.x-loading-left::before{background-color:rgba(170, 170, 170, 0.8)}
 .x-loading-spinner > span.x-loading-left{background-color:rgba(170, 170, 170, 0.7)}
 .x-loading-spinner > span.x-loading-left::after{background-color:rgba(170, 170, 170, 0.6)}
 .x-loading-spinner > span.x-loading-bottom::before{background-color:rgba(170, 170, 170, 0.5)}
 .x-loading-spinner > span.x-loading-bottom{background-color:rgba(170, 170, 170, 0.4)}
 .x-loading-spinner > span.x-loading-bottom::after{background-color:rgba(170, 170, 170, 0.35)}
 .x-loading-spinner > span.x-loading-right::before{background-color:rgba(170, 170, 170, 0.3)}
 .x-loading-spinner > span.x-loading-right{background-color:rgba(170, 170, 170, 0.25)}
 .x-loading-spinner > span.x-loading-right::after{background-color:rgba(170, 170, 170, 0.2)}
 .x-loading-spinner > span.x-loading-top::before{background-color:rgba(170, 170, 170, 0.15)}
 .x-loading-spinner > span{left:50%;margin-left:-0.05em}
 .x-loading-spinner > span.x-loading-top{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
 .x-loading-spinner > span.x-loading-right{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg)}
 .x-loading-spinner > span.x-loading-bottom{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
 .x-loading-spinner > span.x-loading-left{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg)}
 .x-loading-spinner > span::before{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg)}
 .x-loading-spinner > span::after{-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg)}
 .x-loading-spinner{-webkit-animation-name:x-loading-spinner-rotate;-webkit-animation-duration:.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear}
         @-webkit-keyframes x-loading-spinner-rotate{0%{-webkit-transform:rotate(0deg)}8.32%{-webkit-transform:rotate(0deg)}8.33%{-webkit-transform:rotate(30deg)}16.65%{-webkit-transform:rotate(30deg)}16.66%{-webkit-transform:rotate(60deg)}24.99%{-webkit-transform:rotate(60deg)}25%{-webkit-transform:rotate(90deg)}33.32%{-webkit-transform:rotate(90deg)}33.33%{-webkit-transform:rotate(120deg)}41.65%{-webkit-transform:rotate(120deg)}41.66%{-webkit-transform:rotate(150deg)}49.99%{-webkit-transform:rotate(150deg)}50%{-webkit-transform:rotate(180deg)}58.32%{-webkit-transform:rotate(180deg)}58.33%{-webkit-transform:rotate(210deg)}66.65%{-webkit-transform:rotate(210deg)}66.66%{-webkit-transform:rotate(240deg)}74.99%{-webkit-transform:rotate(240deg)}75%{-webkit-transform:rotate(270deg)}83.32%{-webkit-transform:rotate(270deg)}83.33%{-webkit-transform:rotate(300deg)}91.65%{-webkit-transform:rotate(300deg)}91.66%{-webkit-transform:rotate(330deg)}100%{-webkit-transform:rotate(330deg)}}

HTML结构

 <div class="x-mask-loading" style="text-align:center;margin:1em">
   <div class="x-loading-spinner" style="margin:0 auto 7px;">
   <span class="x-loading-top"></span>
   <span class="x-loading-right"></span>
   <span class="x-loading-bottom"></span>
   <span class="x-loading-left"></span>
   </div>
   <div class="x-loading-msg">加载中…</div>
 </div>

请自觉用webkit内核浏览器查看，手机端完美支持~~

Demo

/*沉淀*/

7 条精彩的吐槽在《使用CSS3制作loading效果》

<ol> <li class="comment even thread-even depth-1" id="li-comment-4787"> <div id="comment-4787"> <div class="comment-author vcard"> <img alt='' src='http://www.laozhuhome.com/avatar/09e2cd55701ee2744ff282cc87000cb5.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.9958.co' rel='external nofollow' class='url'>广州Seo</a></cite> <span class="comment-meta commentmetadata">在37 天之前</span> </div> <div class="comment-text clearfix"> <p>o ,不错哦！</p> </div> <div class="reply"> <a class='comment-reply-link' href='/html/css3-loading?replytocom=4787#respond' onclick='return addComment.moveForm("comment-4787", "4787", "respond", "2634")'>回复</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-4811"> <div id="comment-4811"> <div class="comment-author vcard"> <img alt='' src='http://www.laozhuhome.com/avatar/ce76eb50271d3081e44530276bb03f96.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.baidu.ht' rel='external nofollow' class='url'>很太吧</a></cite> <span class="comment-meta commentmetadata">在28 天之前</span> </div> <div class="comment-text clearfix"> <p>新年快乐！</p> </div> <div class="reply"> <a class='comment-reply-link' href='/html/css3-loading?replytocom=4811#respond' onclick='return addComment.moveForm("comment-4811", "4811", "respond", "2634")'>回复</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-4829"> <div id="comment-4829"> <div class="comment-author vcard"> <img alt='' src='http://www.laozhuhome.com/avatar/9d2ed1dfd0751128dea8ac16c3ad7e8b.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.hncac.com/' rel='external nofollow' class='url'>givens</a></cite> <span class="comment-meta commentmetadata">在16 天之前</span> </div> <div class="comment-text clearfix"> <p>支持！！！……………</p> </div> <div class="reply"> <a class='comment-reply-link' href='/html/css3-loading?replytocom=4829#respond' onclick='return addComment.moveForm("comment-4829", "4829", "respond", "2634")'>回复</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-4837"> <div id="comment-4837"> <div class="comment-author vcard"> <img alt='' src='http://www.laozhuhome.com/avatar/38d448102462b1b1fea81b5a254f2716.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.xj123.info' rel='external nofollow' class='url'>老谢</a></cite> <span class="comment-meta commentmetadata">在10 天之前</span> </div> <div class="comment-text clearfix"> <p>demo似乎打不开 <img src='http://www.laozhuhome.com/wp-includes/images/smilies/emo_im_injury.png' alt='（无法表达）' class='wp-smiley' /> </p> </div> <div class="reply"> <a class='comment-reply-link' href='/html/css3-loading?replytocom=4837#respond' onclick='return addComment.moveForm("comment-4837", "4837", "respond", "2634")'>回复</a> </div> </div> <ul class='children'> <li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-4842"> <div id="comment-4842"> <div class="comment-author vcard"> <img alt='' src='http://www.laozhuhome.com/avatar/039f1f8556b02dd133ec6974036727db.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.laozhuhome.com' rel='external nofollow' class='url'>N</a></cite> <span class="comment-meta commentmetadata">在8 天之前</span> </div> <div class="comment-text clearfix"> <p>@老谢, 挂的外链，速度是不是很快，会出现不能访问的情况，下次可能就好了。。。</p> </div> <div class="reply"> <a class='comment-reply-link' href='/html/css3-loading?replytocom=4842#respond' onclick='return addComment.moveForm("comment-4842", "4842", "respond", "2634")'>回复</a> </div> </div> <ul class='children'> <li class="comment odd alt depth-3" id="li-comment-4860"> <div id="comment-4860"> <div class="comment-author vcard"> <img alt='' src='http://www.laozhuhome.com/avatar/b453fa3b0c43f6825d52de2a9d7b2deb.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://log4d.com' rel='external nofollow' class='url'>alswl</a></cite> <span class="comment-meta commentmetadata">在1 天之前</span> </div> <div class="comment-text clearfix"> <p>@N, Dropbox，我说怎么打开这么慢</p> </div> <div class="reply"> <a class='comment-reply-link' href='/html/css3-loading?replytocom=4860#respond' onclick='return addComment.moveForm("comment-4860", "4860", "respond", "2634")'>回复</a> </div> </div> <ul class='children'> <li class="comment byuser comment-author-admin bypostauthor even depth-4" id="li-comment-4861"> <div id="comment-4861"> <div class="comment-author vcard"> <img alt='' src='http://www.laozhuhome.com/avatar/039f1f8556b02dd133ec6974036727db.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.laozhuhome.com' rel='external nofollow' class='url'>N</a></cite> <span class="comment-meta commentmetadata">在1 天之前</span> </div> <div class="comment-text clearfix"> <p>@alswl,Dropbox的好处就是方便本地管理，省去了上传这个步骤，为了高效牺牲点速度吧</p> </div> <div class="reply"> <a class='comment-reply-link' href='/html/css3-loading?replytocom=4861#respond' onclick='return addComment.moveForm("comment-4861", "4861", "respond", "2634")'>回复</a> </div> </div> </li> </ul> </li> </ul> </li> </ul> </li> </ol>