wordpress添加刷新页面加载完成特效

重庆SEO分享:为wordpress添加刷新页面加载完成特效,有需要的可以根据以下源代码设置到自己的网站。

第一:加载需要的jQuery 库(打开主题文件下header.php在<head></head>之间增加调用代码)

第二:打开主题文件下的style.css文件加入以下CSS样式(也就是显示圆圈的效果),加上之后刷新下主页看下是否显示了一个旋转的圆圈。

/* 页面加载刷新特效*/
#circle-box {
position: fixed;
left: 20px;
bottom: 170px;
width: 60px;
height: 60px;
z-index: 12;
}
#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;
    width:50px;
    height:50px;
    margin:0 auto;      
    -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;
    width:30px;
    height:30px;
    margin:0 auto;
    position:absolute;
    left:10px;
    bottom:10px;
    -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); }
}

第三:在header.php文件中<body>之前增加下面的判断代码(刷新加载完成之后隐藏旋转的特效)

Ps:重庆陈江林浏览《我只在乎你》网站,发现了《为wordpress添加刷新页面加载完成特效》这篇文章,觉得不错分享给大家!特效如本站效果,快来捣腾到你的网站里!如果加载完成后也无法隐藏,可能是网站缓存的原因,缓存过后就能与《重庆SEO》一样正常显示!

sxtx2

sxtx3

源代码下载:http://pan.baidu.com/s/1qWwMPsw

 

发表评论

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