趣文：巧用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;
}
*/</pre> 
  

有些網站會不起作用，往下翻網頁，有種自由下落的感覺
 點擊查看原始尺寸圖片
上面就列舉這些了，其他惡搞內容，請參見下面這段 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); }
}</pre> 
  
整理：伯樂在線-黃利民

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

                        
 本文由用戶 jopen  自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                        
 
本文地址：http://www.baiduhome.net/news/view/1df58a7                        
                        
 CSS