1. 首頁
  2. 文化

巧用CSS檔案愚人節惡搞

巧用CSS檔案愚人節惡搞

一、開啟瀏覽器的' Custom.css 檔案

本文以 Chrome 為例(CSS 修改後立即生效),進入同事或朋友的電腦,按下面方式開啟 Custom.css 檔案

Mac:~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Windows XP:系統盤:Documents and Settings使用者名稱\Local SettingsApplication DataGoogleChromeUser DataDefaultUser StyleSheetsCustom.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檔案愚人節惡搞]相關文章:

1.關於css是什麼

2.巧用CSS檔案愚人節惡搞