超酷的CSS3网页加载效果

代码说明

效果极酷的CSs3 Loading网页加载动画，几个小加点循环放大缩小，形成一连串的动画效果，整体看上去很新颖，因为这前的LOADING都是整个图标在动，这一个就不一样了。不过看了下代码，实现起来有点繁琐，如果只是为了Loading写这么多代码，有点大才小用CSS3了。测试看效果请使用火狐或Chrome浏览器。转自源码爱好者

HTML代码

<style> #circular3dG{ position:relative; width:128px; height:128px; } .circular3dG{ position:absolute; background-color:#000000; width:36px; height:36px; -webkit-border-radius:38px; -moz-border-radius:38px; border-radius:38px; -webkit-animation-name:bounce_circular3dG; -webkit-animation-duration:1.6s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -moz-animation-name:bounce_circular3dG; -moz-animation-duration:1.6s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -o-animation-name:bounce_circular3dG; -o-animation-duration:1.6s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; -ms-animation-name:bounce_circular3dG; -ms-animation-duration:1.6s; -ms-animation-iteration-count:infinite; -ms-animation-direction:linear; } #circular3d_1G{ left:52px; top:8px; -webkit-animation-delay:0.6s; -moz-animation-delay:0.6s; -o-animation-delay:0.6s; -ms-animation-delay:0.6s} #circular3d_2G{ left:78px; top:30px; -webkit-animation-delay:0.8s; -moz-animation-delay:0.8s; -o-animation-delay:0.8s; -ms-animation-delay:0.8s; } #circular3d_3G{ left:94px; top:58px; -webkit-animation-delay:1s; -moz-animation-delay:1s; -o-animation-delay:1s; -ms-animation-delay:1s; } #circular3d_4G{ left:88px; top:86px; -webkit-animation-delay:1.2s; -moz-animation-delay:1.2s; -o-animation-delay:1.2s; -ms-animation-delay:1.2s} #circular3d_5G{ left:54px; top:94px; -webkit-animation-delay:1.4s; -moz-animation-delay:1.4s; -o-animation-delay:1.4s; -ms-animation-delay:1.4s} #circular3d_6G{ left:10px; top:62px; -webkit-animation-delay:1.6s; -moz-animation-delay:1.6s; -o-animation-delay:1.6s; -ms-animation-delay:1.6s; } #circular3d_7G{ left:0px; top:18px; -webkit-animation-delay:1.8s; -moz-animation-delay:1.8s; -o-animation-delay:1.8s; -ms-animation-delay:1.8s; } #circular3d_8G{ left:22px; top:0px; -webkit-animation-delay:2s; -moz-animation-delay:2s; -o-animation-delay:2s; -ms-animation-delay:2s; } @-webkit-keyframes bounce_circular3dG{ 0%{ -webkit-transform:scale(1)} 100%{ -webkit-transform:scale(.3)} } @-moz-keyframes bounce_circular3dG{ 0%{ -moz-transform:scale(1)} 100%{ -moz-transform:scale(.3)} } @-o-keyframes bounce_circular3dG{ 0%{ -o-transform:scale(1)} 100%{ -o-transform:scale(.3)} } @-ms-keyframes bounce_circular3dG{ 0%{ -ms-transform:scale(1)} 100%{ -ms-transform:scale(.3)} } </style> <div id="circular3dG"> <div id="circular3d_1G" class="circular3dG"></div> <div id="circular3d_2G" class="circular3dG"></div> <div id="circular3d_3G" class="circular3dG"></div> <div id="circular3d_4G" class="circular3dG"></div> <div id="circular3d_5G" class="circular3dG"></div> <div id="circular3d_6G" class="circular3dG"></div> <div id="circular3d_7G" class="circular3dG"></div> <div id="circular3d_8G" class="circular3dG"></div> </div>

代码演示