巧用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檔案愚人節惡搞