後天就是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. 網頁上下顛倒
|
1 2 3 4 5 6 |
/* Turn every website upside down */ body { -webkit-transform: rotate(180deg); } |
點選檢視原始尺寸圖片
2. 網頁旋轉
|
1 2 3 4 5 6 |
/* Spin every Website */ body { /*-webkit-animation: spin 5s linear infinite;*/ } |
點選檢視原始尺寸圖片
3. 網頁中所有圖片上下顛倒
|
1 2 3 4 5 6 |
/* Flip all images upside down */ img { /*-webkit-transform: rotate(180deg);*/ } |
點選檢視原始尺寸圖片
4. 網頁中所有圖片都自轉
|
1 2 3 4 5 6 |
/* Spin all images */ img { /*-webkit-animation: spin 1s linear infinite;*/ } |
點選檢視原始尺寸圖片
5. 網頁倒在地上了（請用內容超過多屏的網頁測試）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* 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 程式碼。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 |
/* 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/
【非特殊說明，轉載必須在正文中標註並保留原文連結、譯文連結、譯者和作者等資訊，謝謝合作！】