本文最后更新于2022年5月18日，已超过 1 年没有更新，如果文章内容失效，请 反馈 给我们，谢谢！
一步一步来看仔细共5步
第一步 、建立hi.css
第二步 、建立hi.js
第三步 、引用hi.js
第四步 、修改主题的footer.php
第五步 、添加High一下的链接
第二步 、建立hi.js
第三步 、引用hi.js
第四步 、修改主题的footer.php
第五步 、添加High一下的链接
第一步 在根目录建立hi.css
@charset "utf-8";
body {
-webkit-backface-visibility:hidden
}
.mw-strobe_light {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:100000;
background-color:rgba(250,250,250,0.8);
display:block
}
.mw-harlem_shake_me {
transition:all 0.8s ease-in-out;
-moz-transition:all 0.8s ease-in-out;
-webkit-transition:all 0.8s ease-in-out;
-o-transition:all 0.8s ease-in-out;
-ms-transition:all 0.8s ease-in-out;
animation:spin 1s infinite linear;
-moz-animation:spin 1s infinite linear;
-webkit-animation:spin 1s infinite linear;
-o-animation:spin 1s infinite linear;
-ms-animation:spin 1s infinite linear
}
.mw-harlem_shake_slow {
transition:all 3.2s ease-in-out;
-moz-transition:all 3.2s ease-in-out;
-webkit-transition:all 3.2s ease-in-out;
-o-transition:all 3.2s ease-in-out;
-ms-transition:all 3.2s ease-in-out;
animation:spin 4s infinite linear;
-moz-animation:spin 4s infinite linear;
-webkit-animation:spin 4s infinite linear;
-o-animation:spin 4s infinite linear;
-ms-animation:spin 4s infinite linear
}
.mw-harlem_shake_me {
-webkit-animation-duration:.4s;
-moz-animation-duration:.4s;
-o-animation-duration:.4s;
animation-duration:.4s;
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both
}
.mw-harlem_shake_slow {
-webkit-animation-duration:1.6s;
-moz-animation-duration:1.6s;
-o-animation-duration:1.6s;
animation-duration:1.6s;
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both
}
.flash,.mw-strobe_light {
-webkit-animation-name:flash;
-moz-animation-name:flash;
-o-animation-name:flash;
animation-name:flash
}
@-webkit-keyframes shake {
0%,100% {
-webkit-transform:translateX(0)
}
10%,30%,50%,70%,90% {
-webkit-transform:translateX(-10px)
}
20%,40%,60%,80% {
-webkit-transform:translateX(10px)
}
}@-moz-keyframes shake {
0%,100% {
-moz-transform:translateX(0)
}
10%,30%,50%,70%,90% {
-moz-transform:translateX(-10px)
}
20%,40%,60%,80% {
-moz-transform:translateX(10px)
}
}@-o-keyframes shake {
0%,100% {
-o-transform:translateX(0)
}
10%,30%,50%,70%,90% {
-o-transform:translateX(-10px)
}
20%,40%,60%,80% {
-o-transform:translateX(10px)
}
}@keyframes shake {
0%,100% {
transform:translateX(0)
}
10%,30%,50%,70%,90% {
transform:translateX(-10px)
}
20%,40%,60%,80% {
transform:translateX(10px)
}
}.shake,.im_baked {
-webkit-animation-name:shake;
-moz-animation-name:shake;
-o-animation-name:shake;
animation-name:shake
}
.swing,.im_drunk {
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
transform-origin:top center;
-webkit-animation-name:swing;
-moz-animation-name:swing;
-o-animation-name:swing;
animation-name:swing
}
@-webkit-keyframes wobble {
0% {
-webkit-transform:translateX(0%)
}
15% {
-webkit-transform:translateX(-15%) rotate(-4deg)
}
30% {
-webkit-transform:translateX(12%) rotate(3deg)
}
45% {
-webkit-transform:translateX(-9%) rotate(-2deg)
}
60% {
-webkit-transform:translateX(6%) rotate(2deg)
}
75% {
-webkit-transform:translateX(-3%) rotate(-1deg)
}
100% {
-webkit-transform:translateX(0%)
}
}@-moz-keyframes wobble {
0% {
-moz-transform:translateX(0%)
}
15% {
-moz-transform:translateX(-15%) rotate(-5deg)
}
30% {
-moz-transform:translateX(12%) rotate(3deg)
}
45% {
-moz-transform:translateX(-9%) rotate(-3deg)
}
60% {
-moz-transform:translateX(6%) rotate(2deg)
}
75% {
-moz-transform:translateX(-3%) rotate(-1deg)
}
100% {
-moz-transform:translateX(0%)
}
}@-o-keyframes wobble {
0% {
-o-transform:translateX(0%)
}
15% {
-o-transform:translateX(-15%) rotate(-5deg)
}
30% {
-o-transform:translateX(12%) rotate(3deg)
}
45% {
-o-transform:translateX(-9%) rotate(-3deg)
}
60% {
-o-transform:translateX(6%) rotate(2deg)
}
75% {
-o-transform:translateX(-3%) rotate(-1deg)
}
100% {
-o-transform:translateX(0%)
}
}@keyframes wobble {
0% {
transform:translateX(0%)
}
15% {
transform:translateX(-15%) rotate(-5deg)
}
30% {
transform:translateX(12%) rotate(3deg)
}
45% {
transform:translateX(-9%) rotate(-3deg)
}
60% {
transform:translateX(6%) rotate(2deg)
}
75% {
transform:translateX(-3%) rotate(-1deg)
}
100% {
transform:translateX(0%)
}
}.wobble,.im_first {
-webkit-animation-name:wobble;
-moz-animation-name:wobble;
-o-animation-name:wobble;
animation-name:wobble
}
@-webkit-keyframes pulse {
0% {
-webkit-transform:scale(1)
}
50% {
-webkit-transform:scale(1.1)
}
100% {
-webkit-transform:scale(1)
}
}@-moz-keyframes pulse {
0% {
-moz-transform:scale(1)
}
50% {
-moz-transform:scale(1.1)
}
100% {
-moz-transform:scale(1)
}
}@-o-keyframes pulse {
0% {
-o-transform:scale(1)
}
50% {
-o-transform:scale(1.1)
}
100% {
-o-transform:scale(1)
}
}@keyframes pulse {
0% {
transform:scale(1)
}
50% {
transform:scale(1.1)
}
100% {
transform:scale(1)
}
}.pulse,.im_blown {
-webkit-animation-name:pulse;
-moz-animation-name:pulse;
-o-animation-name:pulse;
animation-name:pulse
}
@-webkit-keyframes bounceIn {
0% {
opacity:0;
-webkit-transform:scale(.3)
}
50% {
opacity:1;
-webkit-transform:scale(1.05)
}
70% {
-webkit-transform:scale(.9)
}
100% {
-webkit-transform:scale(1)
}
}@-moz-keyframes bounceIn {
0% {
opacity:0;
-moz-transform:scale(.3)
}
50% {
opacity:1;
-moz-transform:scale(1.05)
}
70% {
-moz-transform:scale(.9)
}
100% {
-moz-transform:scale(1)
}
}@-o-keyframes bounceIn {
0% {
opacity:0;
-o-transform:scale(.3)
}
50% {
opacity:1;
-o-transform:scale(1.05)
}
70% {
-o-transform:scale(.9)
}
100% {
-o-transform:scale(1)
}
}@keyframes bounceIn {
0% {
opacity:0;
transform:scale(.3)
}
50% {
opacity:1;
transform:scale(1.05)
}
70% {
transform:scale(.9)
}
100% {
transform:scale(1)
}
}.bounceIn,.im_trippin {
-webkit-animation-name:bounceIn;
-moz-animation-name:bounceIn;
-o-animation-name:bounceIn;
animation-name:bounceIn
}
第二步建立hi.js
function hig() { (function() {
function c() {
$(".mw_added_css").remove();
var e = document.createElement("link");
e.setAttribute("type", "text/css");
e.setAttribute("rel", "stylesheet");
e.setAttribute("href", f);
e.setAttribute("class", l);
document.body.appendChild(e)
}
function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t < e.length; t++) {
document.body.removeChild(e[t])
}
}
function p() {
var e = document.createElement("div");
e.setAttribute("class", a);
document.body.appendChild(e);
setTimeout(function() {
document.body.removeChild(e)
},
100)
}
function d(e) {
return {
height: e.offsetHeight,
width: e.offsetWidth
}
}
function v(i) {
var s = d(i);
return s.height > e && s.height < n && s.width > t && s.width < r
}
function m(e) {
var t = e;
var n = 0;
while ( !! t) {
n += t.offsetTop;
t = t.offsetParent
}
return n
}
function g() {
var e = document.documentElement;
if ( !! window.innerWidth) {
return window.innerHeight
} else if (e && !isNaN(e.clientHeight)) {
return e.clientHeight
}
return 0
}
function y() {
if (window.pageYOffset) {
return window.pageYOffset
}
return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
}
function E(e) {
var t = m(e);
return t >= w && t <= b + w
}
function S() {
$("audio").remove();
var e = document.createElement("audio");
e.setAttribute("class", l);
e.src = i;
e.loop = false;
e.addEventListener("canplay",
function() {
setTimeout(function() {
x(k)
},
500);
setTimeout(function() {
N();
p();
for (var e = 0; e < O.length; e++) {
T(O[e])
}
},
5000)
},
true);
e.addEventListener("ended",
function() {
N();
h()
},
true);
e.innerHTML = " <p>如果你正在读这篇文章，那是因为你的浏览器不支持音频元素。我们建议你得到一个新的浏览器。</p> <p>";
document.body.appendChild(e);
e.play()
}
function x(e) {
e.className += " " + s + " " + o
}
function T(e) {
e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
}
function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp("\\b" + s + "\\b");
for (var n = 0; n < e.length;) {
e[n].className = e[n].className.replace(t, "")
}
}
var e = 30;
var t = 30;
var n = 350;
var r = 350;
var i = CrazyMusic[Math.floor(Math.random() * Number(CrazyMusic.length))];
var f = hicss;
var s = "mw-harlem_shake_me";
var o = "im_first";
var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
var a = "mw-strobe_light";
var l = "mw_added_css";
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
if (E(A)) {
k = A;
break
}
}
}
if (A === null) {
return
}
c();
S();
var O = [];
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
O.push(A)
}
}
})()
};
function stopCrazy() {
$("audio").remove();
$(".mw_added_css").remove()
}
第三步 在页面底部引用hi.js
<script type='text/javascript' src='/hi.js'></script>
第四步 将下面代码放到主题的footer.php中
<script type="text/javascript">
/* 定义 hi.css */
var hicss="/hi.css";
/* 定义歌曲数组 */
var CrazyMusic=[
"http://www.ytmp3.cn/down/77158.mp3",
"http://www.ytmp3.cn/down/77167.mp3",
"http://www.ytmp3.cn/down/77020.mp3",
"http://www.ytmp3.cn/down/77161.mp3"
];
/* 监听到 ESC 或鼠标双击动作，将停止所有效果 */
function KeyMonitor() {
if (event.keyCode == 27) {stopCrazy()};
}
$(document).bind("dblclick",stopCrazy);
$(document).bind("onkeydown ",KeyMonitor);
</script>
第五部 触发按钮
<a title="亲，点我放松一下吧~！(单击启动，双击或 ESC 停止)" id="hig" href="javascript:void(0);" onclick="hig();" ondblclick="location.reload(true);">点我嗨一下</a>
版权所有丨如未注明 , 均为原创丨本网站采用 BY-NC-SA 协议进行授权 , 转载请注明 出处！
