向世界分享我的生活与见解
To the world to share my life with insights

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

最近为我的网站添加了一个由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";
 }
}

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

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

未经允许不得转载:维简网 » 针对网页加载时的旋转功能部件教程说明

分享到:更多 ()

众享 抢沙发

评论前必须登录!