在wordpress中使用“加载中”特效

  • 内容
  • 评论
  • 相关

1、将下面的代码添加到主题的“样式表 (style.css)”中。

/** "加载中"特效图形 **/
#circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(10,10,10,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 #808080;
z-index:1000;
width:50px;
height:50px;
margin:0 auto;
position:fixed;
left:30px;
bottombottom: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(20,20,20,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 #202020;
z-index:1000;
width:30px;
height:30px;
margin:0 auto;
position:fixed;
left:40px;
bottombottom: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;
}
@-moz-keyframes spinPulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-o-keyframes spinPulse {
0% { -o-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
50% { -o-transform:rotate(145deg); opacity:1;}
100% { -o-transform:rotate(-320deg); opacity:0; }
}
@-o-keyframes spinoffPulse {
0% { -o-transform:rotate(0deg); }
100% { -o-transform:rotate(360deg); }
}
@-ms-keyframes spinPulse {
0% { -ms-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #505050; }
50% { -ms-transform:rotate(145deg); opacity:1;}
100% { -ms-transform:rotate(-320deg); opacity:0; }
}
@-ms-keyframes spinoffPulse {
0% { -ms-transform:rotate(0deg); }
100% { -ms-transform:rotate(360deg); }
}

2、这一步的用处是把前面的CSS代码显示出来,在主题内的“页首 (header.php)”文件的 </head> 与 <body> 之间内同样添加下列代码:

<div id="circle"></div><div id="circle1"></div>

3、添加JS渐隐效果。这个步骤是用于在网页加载完成后使加载特效渐渐消失,而不是一直不停地转动。在“页尾 (footer.php)”内的</body>前添加下列代码:

<script type="text/javascript">
$(window).load(function() {
$("#circle").fadeOut(500);
$("#circle1").fadeOut(700);
});
</script>

完成以上三步,即大功告成!(注:可以根据自己的需求调节 CSS中circle 以及 circle1 的大小和位置。)

加载中特效

觉得有用,欢迎打赏!
微信打赏

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注