针对网页加载时的旋转功能部件教程说明

最近为我的网站添加了一个由css制作的网页加载时会旋转的部件，通过这个部件顿时让原来冷冰冰的网页加载也有了可观赏性，同时也提高了网站的技术逼格。刚好有网友看到也比较喜欢，问我怎么实现的。趁着几天刚好有空就把这段代码写个教程分享一下，大家喜欢的可以自行添加。

部件预览

这个功能是在网页的footer文件中添加html代码（把html代码放在footer区域的原因是因为网站无论加载那个网页都需要加载footer的文件，相应的也就实现了无论加载什么网页文件都会实现这个功能。）

然后通过css样式文件来实现这个功能的具体展示。使用javascript来控制它，达到网页加载的时候就显示这个部件，加载完成就隐藏起来。

具体实现

<!-------------放置在footer文件中的html代码-------------->
<div id="circle"><div>
<div id="circle1"><div>

<!---------放置在网页主样式文件的css代码-------->
#circle {
 background-color: rgba(0,0,0,0);
 border: 5px solid rgba(0,183,229,0.9);
 opacity: .9;
 border-right: 5px solid rgba(0,0,0,0);
 border-left: 5px solid rgba(0,0,0,0);
 border-radius: 50px;
 box-shadow: 0 0 35px #2187e7;
 width: 50px;
 height: 50px;
 margin: 0 auto;
 position: fixed;
 left: 30px;
 bottom: 30px;
 -moz-animation: spinPulse 1s infinite ease-in-out;
 -webkit-animation: spinPulse 1s infinite ease-in-out;
 -o-animation: spinPulse 1s infinite ease-in-out;
 -ms-animation: spinPulse 1s infinite ease-in-out;
}

#circle1 {
 background-color: rgba(0,0,0,0);
 border: 5px solid rgba(0,183,229,0.9);
 opacity: .9;
 border-left: 5px solid rgba(0,0,0,0);
 border-right: 5px solid rgba(0,0,0,0);
 border-radius: 50px;
 box-shadow: 0 0 15px #2187e7;
 width: 30px;
 height: 30px;
 margin: 0 auto;
 position: fixed;
 left: 40px;
 bottom: 40px;
 -moz-animation: spinoffPulse 1s infinite linear;
 -webkit-animation: spinoffPulse 1s infinite linear;
 -o-animation: spinoffPulse 1s infinite linear;
 -ms-animation: spinoffPulse 1s infinite linear;
}

//放置在javascript(main.js)文件的js控制代码
document.onreadystatechange = function(){
 if(document.readyState == "complete"){
 document.getElementById("circle").style.display="none";
 document.getElementById("circle1").style.display="none";
 }
}

把这些代码分别放到指定的文件位置之后，相信你的网站也已经添加这个略增逼格的功能了。如果添加无误打开网页的时候无法显示， 你可尝试清楚浏览器缓存，在重新加载网页。

教程到此结束，喜欢的话就赶快试一下吧。