趣文:巧用 CSS 文件,愚人节极客式恶搞

 

 

Quantum 通过 Google 阅读器发送给您的内容: {style=”margin:0px 3px;font-family:sans-serif”}

 

 

{style=”margin: 0.25em 0 0 0”}

趣文:巧用 CSS 文件,愚人节极客式恶搞

于 13-3-29 通过 博客 - 伯乐在线 作者:黄利民

\

后天就是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);  }

website upside
down

点击查看原始尺寸图片

2. 网页旋转

/*    Spin every Website  */   body {    /*-webkit-animation: spin 5s linear infinite;*/  }

website
spin

点击查看原始尺寸图片

3. 网页中所有图片上下颠倒

/*    Flip all images upside down  */  img {    /*-webkit-transform: rotate(180deg);*/  }

img upside
down

点击查看原始尺寸图片

4. 网页中所有图片都自转

/*  Spin all images  */  img {    /*-webkit-animation: spin 1s linear infinite;*/  }

img
spin

点击查看原始尺寸图片

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;  }  */

website fall over
2

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

website fall
over

点击查看原始尺寸图片

上面就列举这些了,其他恶搞内容,请参见下面这段 CSS 代码。 {style=”text-align:left”}

/*  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/

【非特殊说明,转载必须在正文中标注并保留原文链接、译文链接、译者和作者等信息,谢谢合作!】

相关文章

趣文:巧用 CSS 文件,愚人节极客式恶搞,首发于博客 - 伯乐在线

\

 

 

可从此处完成的操作: {style=”margin:0px 3px;font-family:sans-serif”}

 

 

Written on March 31, 2013