巧用CSS文件恶搞
每天的日子很乏味，也就是那个可适度开玩笑、整蛊的日子了。如果你想和那些要上网的朋友或同事开个极客式玩笑，那就来试试这个国外网友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;*/
}
/*
Flip all images upside down
*/
img {
/*-webkit-transform: rotate(180deg);*/
}
3. 网页中所有图片上下颠倒
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.
*/
/*
Turn every website upside down
*/
body {
/*-webkit-transform: rotate(180deg);
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;
animation: spin 5s linear infinite;*/
}
/*
Flip all images upside down
*/
img {
/*-webkit-transform: rotate(180deg);
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;
animation: spin 1s linear infinite;*/
}
/*
Hide every 2nd paragraph element on a page
*/
p:nth-child(2) {
/*display:none !important;*/
}
/*
Permanent cursor wait
*/
html {
/*cursor:wait !important; */
}
/*
hide the cursor all together
*/
html {
/*cursor:none !important;*/
}
/*
slowly grow text
*/
p {
-webkit-animation: grow 120s ease-in;
-moz-animation: grow 120s ease-in;
animation: grow 120s ease-in;
}
/*
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;
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); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fall {
0% { transform: none; }
100% { transform: rotateX(-90deg); }
}
@-moz-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-moz-keyframes fall {
0% { transform: none; }
100% { transform: rotateX(-90deg); }
}
@-webkit-keyframes grow {
0% { font-size: none; }
100% { font-size: 80pt; }
}
@-moz-keyframes grow {
0% { font-size: none; }
100% { font-size: 80pt; }
}
@keyframes grow {
0% { font-size: none; }
100% { font-size: 80pt; }
}
