一个不错的网站跳舞小功能“High一下”安利给小伙伴

直入主题，直接说怎么搬。

第一步

1、创建hi.css文件，代码如下：

.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;
}

body {
	-webkit-backface-visibility: hidden;
}

.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;
}

2、创建hi.js文件，代码如下：

function hig() { (function() {

        function c() {

            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() {

            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])

                    }

                },

                15500)

            },

            true);

            e.addEventListener("ended",

            function() {

                N();

                h()

            },

            true);

            e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</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 = "https://xxx.com/站点目录/hi/Panama-Matteo.mp3";

        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 f = "https://xxx.com/站点目录/hi/hi.css";

        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) {

            console.warn("Could not find a node of the right size. Please try a different page.");

            return

        }

        c();

        S();

        var O = [];

        for (var L = 0; L < C.length; L++) {

            var A = C[L];

            if (v(A)) {

                O.push(A)

            }

        }

    })()

}

第二步

1、在网站的服务器里上传你喜欢的一首音乐文件（mp3），用ftp或者别的工具都可以上传，上传到https://xxx.com/站点目录/hi/Panama-Matteo.mp3。

2、修改上面的hi.js文件，需要修改两处。一处是 https://xxx.com/站点目录/hi/Panama-Matteo.mp3 一处是 https://xxx.com/站点目录/hi/hi.css；通过搜索找到修改成自己的目录地址。

第三步

在首页（index.php）或者底部（footer.php）文件中添加代码，代码添加到</body>标签前面，代码如下：

<script src="<?php bloginfo('template_url'); ?>/hi/hi.js"></script>
</body>
</html>

最后

在首页的头部添加个按钮测试一下，代码如下：

<button type="button" class="btn btn-link" onclick="hig();" style="outline:none;">
    <font style="color:red">High一下</font>
</button>

Want to help you, I wish you success!

Happy every day！