超酷的CSS3网页加载效果

2020-01-27 14:19:41

字体：大中小

来源：转载

供稿：网友

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

<title>CSS3网页加载效果</title><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>

上一篇：CSS实现网页顶部的阴影效果

下一篇：带缺口的圆环CSS3 Loading动画