[分享]给大家发一个可以让自己网站很骚气的源码
本帖最后由 rong11417 于 2018-3-22 15:29 编辑这个源码是网上找到的，自己做了一些修改效果可以看下，http://xlzlt.top/zhibo，打开音量 http://xlzlt.top/yingshi(已恢复)
https://static.52pojie.cn/static/image/hrline/line4.png
然后将这两个文件上传到空间，然后把自己的主网页地址的head代码处加上 <script src="http://xlzlt.top/happy.js"></script> 就可以了
一共两个文件
源码如下
kuanghai.css
/* .im_drunk, .im_baked, .im_trippin, .im_blown */
.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;
}
/*
Animate.css - http://daneden.me/animate
Licensed under the ☺ license (http://licence.visualidiot.com/)
But we have it modified for our use.
*/
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;
}
一个是happy.js
//初始源码来自网上
//资料影视通修改
setTimeout('le()',1000);
function le() {
function loadCss() { //将自定义css文件引入页面
var myCss = document.createElement("link");
myCss.setAttribute("type", "text/css");
myCss.setAttribute("rel", "stylesheet");
myCss.setAttribute("href", cssHref);//自定义css文件地址
myCss.setAttribute("class", l);
document.body.appendChild(myCss)
}
function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t < e.length; t++) {
document.body.removeChild(e)
}
}
function p() {
var e = document.createElement("div");
e.setAttribute("class", a);
document.body.appendChild(e);
setTimeout(function() {
document.body.removeChild(e)
},
100)
}
function getSize(e) { //获取目标的宽高
return {
height: e.offsetHeight,
width: e.offsetWidth
}
}
function checkSize(i) { //判断目标大小是否符合要求
var s = getSize(i); //获取目标的宽高
return s.height > minHeight && s.height < maxHeight && s.width > minWidth && s.width < maxWidth //判断目标是否符合条件
}
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 setBgm() {//设置音乐
var e = document.createElement("audio");
e.setAttribute("class", l);
e.src = bgmSrc;//bgm地址
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)
}
},
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
}
function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp("\\b" + s + "\\b");
for (var n = 0; n < e.length;) {
e.className = e.className.replace(t, "")
}
}
var minHeight = 3; //最小高度
var minWidth = 3; //最小宽度
var maxHeight = 800; //最大高度
var maxWidth = 1400; //最大宽度
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"; //最终要移除的css
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {
var targetDiv = C;
if (checkSize(targetDiv)) {
if (E(targetDiv)) {
k = targetDiv;
break
}
}
}
if (targetDiv === null) { //如果没找到合适大小的
console.warn("Could not find a node of the right size. Please try a different page.");
return
}
loadCss(); //将自定义css文件引入页面
setBgm(); //添加背景音乐
var O = [];
for (var L = 0; L < C.length; L++) {
var targetDiv = C;
if (checkSize(targetDiv)) {
O.push(targetDiv)
}
};
$("body").css({ //网页整体倾斜效果
"overflow-x": "hidden",
"transform": "rotate(1deg)",
"-webkit-transform": "rotate(1deg)",
"-moz-transform": "rotate(1deg)",
"-o-transform": "rotate(1deg)",
"-ms-transform": "rotate(1deg)"
});
}
var bgmSrc = "http://xlzlt.top/PRC.mp3";
var cssHref = "http://xlzlt.top/kuanghai.css"; //设置页面动效css地址
zjls9933 发表于 2018-3-20 13:22
我有个大胆的问题，你这样眼睛会不会看花了
我用win 7 +chrome就不会，只要头跟着抖动，眼不会花的 雪莱鸟 发表于 2018-3-20 13:11
是挺骚的，本来想给你的二维码打赏，结果总是扫不到
哈哈，谢谢啦 你可以等歌停了就不晃了 {:1_918:} 是不错 但是晃得眼睛疼{:301_999:} {:1_908:}晃的我头疼，特么还是给人看么 晃的我头疼 额，很骚气，但是很头疼。能再这里看片的肯定是都是神人！
额，很骚气，进网站完全看效果哈哈 看的头都晕了
抖得不能自理。。哈哈哈哈哈啊 晃的我头疼 这样的网站我点开一次，下次再也不来了！