日志随笔

[前端教程]给网站加入High一下特效

gyue2345·2016-02-03·51 次阅读··

   2016-02-03 23:27 LJY2345    抢沙发   51 
   评分 0 次，平均分 0.0 ：    抢沙发
导语：理论上本功能支持任何站点，以下以WordPress为例：

打开style.css文件，在最下边加入如下代码：:neutral:

.btn-link {
	border-radius: 0;
	color: #428BCA;
	cursor: pointer;
	font-weight: normal;
}

.btn-link,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link {
	background-color: rgba(0,0,0,0);
	box-shadow: none;
}

.btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active {
	border-color: rgba(0,0,0,0);
}

.btn-link:hover,.btn-link:focus {
	background-color: rgba(0,0,0,0);
	color: #2A6496;
	text-decoration: none;
}

.btn-link[disabled]:hover,fieldset[disabled] .btn-link:hover,.btn-link[disabled]:focus,fieldset[disabled] .btn-link:focus {
	color: #999999;
	text-decoration: none;
}

在主题目录中建立一个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;
}

保存，上传到主题目录。

在主题目录建立一个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 = "http://www.landiannews.com/wp-content/themes/landian/music/love.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 = "http://www.landiannews.com/wp-content/themes/landian/js/hi.js";
		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)
			}
		}
	})()
}

文件建好后别急着上传， 先找到这段代码

var i = "http://www.landiannews.com/wp-content/themes/landian/music/love.mp3";

，然后把里面的mp3文件链接换成自己喜欢的；换完之后上传就ok了。

打开footer.php文件，找到</body>，并在</body>前 加入如下代码。

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

保存 :shock:

最后，我们就可以为主题添加一个High一下的链接了，可以根据自己的实际需要，把一下代码放到页面中。

<button type="button" class="btn btn-link" onclick="hig();">High一下</button>

几个示例：

 

[前端教程]给网站加入High一下特效

赞赏

历史上的文章

  

除特别注明外，本站文章均采用BY-NC-SA协议授权，转载请注明来自：https://www.ljy2345.com/2016/02/%e5%89%8d%e7%ab%af%e6%95%99%e7%a8%8b%e7%bb%99%e7%bd%91%e7%ab%99%e5%8a%a0%e5%85%a5high%e4%b8%80%e4%b8%8b%e7%89%b9%e6%95%88/

博 主作者： 关注：6    粉丝：1最后编辑于：2017年7月20日
LJY IT BLOG的站长。

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

相关文章

view comments - NOTHING

Comments | NOTHING

no comment

切换注册
忘记密码 ?

×

您也可以使用第三方帐号快捷登录

切换登录

×
扫一扫二维码分享
下载海报
  切换主题 | SCHEME TOOL