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 的大小和位置。)
效果如本站左下角加载特效所示,刷新可见!
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/771.html