趣文：巧用 css 文件，愚人节极客式恶搞

后天就是4月1日愚人节了，也就是那个可适度开玩笑、整蛊的日子了。如果你想和那些要上网的朋友或同事开个极客式玩笑，那就来试试这个国外网友wes bos分享了一个css文件吧。

/* 免责声明：恶搞带来的所有后果，请恶搞者自行负责。伯乐在线不承担任何责任。(*^__^*) */

&

一、打开浏览器的 custom.css 文件

本文以 chrome 为例（css 修改后立即生效），进入同事或朋友的电脑，按下面方式打开 custom.css 文件

• mac：~/library/application support/google/chrome/default/user stylesheets/custom.css
• windows xp：系统盘:\documents and settings\用户名\local settings\application data\google\chrome\user data\default\user stylesheets\custom.css（其他 windows 系统类似，在个人账号中的找“应用数据” appdata……）
• ubuntu (chromium)：~/.config/chromium/default/user stylesheets/custom.css

二、在 custom.css 文件中添加相应css代码

1. 网页上下颠倒

/*
  turn every website upside down
*/
body {
  -webkit-transform: rotate(180deg);
}

点击查看原始尺寸图片

2. 网页旋转

/*
  spin every website
*/ 
body {
  /*-webkit-animation: spin 5s linear infinite;*/
}

点击查看原始尺寸图片

3. 网页中所有图片上下颠倒

/*
  flip all images upside down
*/
img {
  /*-webkit-transform: rotate(180deg);*/
}

点击查看原始尺寸图片

4. 网页中所有图片都自转

/*
spin all images
*/
img {
  /*-webkit-animation: spin 1s linear infinite;*/
}

点击查看原始尺寸图片

5. 网页倒在地上了（请用内容超过多屏的网页测试）

/*
make every website fall over!
*/
/*
html, body {
height: 100%;
}

html {
-webkit-perspective: 1000;
}

body {
-webkit-transform-origin: bottom center;
-webkit-transform: rotatex(-90deg);
-webkit-animation: fall 1.5s ease-in;
}
*/

有些网站会不起作用，往下翻网页，有种自由下落的感觉

点击查看原始尺寸图片

上面就列举这些了，其他恶搞内容，请参见下面这段 css 代码。

/*
aprilfools.css
written by wes bos
i assume no responsibility for angry co-workers or lost productivity

put these css definitons into your co-workers custom.css file.
they will be applied to every website they visit as well as their developer tools.

mac: ~/library/application support/google/chrome/default/user stylesheets/custom.css

pc: c:/users/yourusername/appdata/local/google/chrome/user data/default/user stylesheets/custom.css

ubuntu (chromium): ~/.config/chromium/default/user stylesheets/custom.css
*/

/*
turn every website upside down
*/
body {
  /*-webkit-transform: rotate(180deg);*/
}

/*
blur every website for a split second every 30 seconds
*/
body {
  /*-webkit-animation: blur 30s infinite;*/
}

/*
spin every website
*/
body {
  /*-webkit-animation: spin 5s linear infinite;*/
}

/*
flip all images upside down
*/
img {
  /*-webkit-transform: rotate(180deg);*/
}

/*
comic sans everything
*/

body, p, body p, body div p {
  /*font-family: 'comic sans ms', cursive !important;*/
}

/*
spin all images
*/
img {
  /*-webkit-animation: spin 1s linear infinite;*/
}

/*
hide every 2nd paragraph element on a page
*/
p:nth-child(2) {
  /*display:none !important;*/
}

/*
spin dev tools round and round
*/
#-webkit-web-inspector {
 /*-webkit-animation: spin 1s linear infinite; */
}

/*
flip dev tools upside down
*/
#-webkit-web-inspector {
 /*-webkit-transform:rotate(180deg);*/
}

/* hide the close button */
#-webkit-web-inspector .toolbar-item.close-left {
  /*display:none !important;*/
}

/* make console text all blurry */
#-webkit-web-inspector .console-group-messages {
  /*text-shadow: 0 0 3px rgba(0,0,0,.5) !important;*/
}

#-webkit-web-inspector .console-error-level .console-message-text,
#-webkit-web-inspector .console-error-level .section .header .title {
  /*text-shadow: 0 0 3px rgba(255,0,0,.5) !important;*/
}

#-webkit-web-inspector .console-user-command > .console-message-text {
  /*text-shadow: 0 0 3px rgba(0,128,255,.5) !important;*/
}

#-webkit-web-inspector .console-group-messages,
#-webkit-web-inspector .console-user-command > .console-message-text,
#-webkit-web-inspector .console-formatted-null,
#-webkit-web-inspector .console-formatted-undefined,
#-webkit-web-inspector .console-debug-level .console-message-text,
#-webkit-web-inspector .console-error-level .console-message-text,
#-webkit-web-inspector .console-error-level .section .header .title,
#-webkit-web-inspector .console-group-messages .section .header .title,
#-webkit-web-inspector .console-formatted-object,
#-webkit-web-inspector .console-formatted-node,
#-webkit-web-inspector .console-formatted-array,
#-webkit-web-inspector .section .properties .name,
#-webkit-web-inspector .event-properties .name,
#-webkit-web-inspector .console-formatted-object .name,
#-webkit-web-inspector .console-formatted-number,
#-webkit-web-inspector .console-formatted-string,
#-webkit-web-inspector #console-messages a {
  /*color: transparent !important;*/
}

/* html pride! */
html {
  /*-webkit-animation: rainbow 8s infinite;*/
}

/*
make every website fall over!
*/
/*
html, body {
height: 100%;
}

html {
-webkit-perspective: 1000;
}

body {
-webkit-transform-origin: bottom center;
-webkit-transform: rotatex(-90deg);
-webkit-animation: fall 1.5s ease-in;
}
*/

/*
insert a phrase every paragraph
*/
/*
p:before {
content: "yolo ";
}
*/

/* animations */

@-webkit-keyframes blur {
  0% { -webkit-filter: blur(0px); }
  49% { -webkit-filter: blur(0px); }
  50% { -webkit-filter: blur(1px); }
  51% { -webkit-filter: blur(0px); }
  100% { -webkit-filter: blur(0px); }
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes rainbow {
  100% { -webkit-filter: hue-rotate(360deg); }
}

@-webkit-keyframes fall {
  0% { -webkit-transform: none; }
  100% { -webkit-transform: rotatex(-90deg); }
}

&

如果各位还有其他极客式恶搞方法，请在评论中留言吧~

&

/* 再次声明：恶搞带来的所有后果（比如重装浏览器、重装系统、影响工作效率等），请恶搞者自行负责。伯乐在线不承担任何责任。/

&

整理：伯乐在线-黄利民

文章链接：http://blog.jobbole.com/37214/

【非特殊说明，转载必须在正文中标注并保留原文链接、译文链接、译者和作者等信息，谢谢合作！】