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

有些网站会不起作用，往下翻网页，有种自由下落的感觉

点击查看原始尺寸图片

上面就列举这些了，其他恶搞内容，请参见下面这段 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); }  }

整理：伯乐在线-黄利民

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