明天就是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文件愚人节恶搞(转)的更多相关文章

  1. [转][前端优化]使用Combres合并对js、css文件的请求

    本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.ht ...

  2. ASP.NET在主题中添加CSS文件

    ASP.NET在主题中添加CSS文件 在ASP.NET中,可以使用CSS来控制页面上HTML元素和ASP.NET控件的皮肤.如果在主题文件夹中添加了CSS文件,则在页面应用主题时也会自动应用CSS. ...

  3. nyoj 1870 愚人节礼物

    愚人节的礼物 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  4. 2014年度辛星解读css第四节

    接下来的这一节我计划解说的是超链接和列表的样式,然后我们做出一个导航栏出来,事实上导航栏是很常见的,可是我们这里做得这个有点并不那么完好,等我们学完了css之后再完好它. ************** ...

  5. (5/24) 模块化:实现快速CSS文件打包

    写在前面:为了兼容,此处的webpack版本为3.6.0.webpack-dev-server版本为2.9.7.css-loader版本为2.0.0.style-loader版本为0.23.1,若在下 ...

  6. 开源中国愚人节网页变模糊的js blur代码

    <![if !IE]> <script> /* * by moli */ $(document).ready(function(){ if(document.cookie.in ...

  7. django开发项目实例2--如何链接图片和css文件(静态文件)

    在上一篇随笔里面,我们已经介绍了如何从零开始用django建立一个项目并且初步运行以来了, 现在我们就要开始写我们的html了,也就是django里面的模板了,不过这节我们只讲如何链接图片和css(静 ...

  8. hau 1870 愚人节的礼物(栈)

    愚人节的礼物 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  9. 2014年辛星解读css第六节

    这一节我们就要讲到布局了,事实上布局本身特别简单.可是要合理的布好局就不那么简单了,就像我们写文章一样.写一篇文章非常easy,可是要写一篇名著就非常难了,这须要我们扎实的功底和对文学的理解,可是.千 ...

随机推荐

  1. 【BZOJ 1022】 [SHOI2008]小约翰的游戏John

    Description 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有n堆石子,小约翰和他的哥哥轮流取石子,每个人取的时候,可以随意选择一堆石子,在这堆石子中取走任意多的石子,但不能一粒石子也不取 ...

  2. 【BZOJ 1040】 [ZJOI2008]骑士

    Description Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬.最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火 ...

  3. Java程序员的发展前景

    不知道什么时候开始,IT业初级程序员的工作性质与进城打工的"农民工"变得如此惊人的相似.很多IT公司的高管认为"人便宜,就是要用到坏掉,然后再找更便宜.更年轻的" ...

  4. JSP中脚本、声明和表达式的本质区别

     JSP脚本元素 使用JSP脚本元素可以将Java代码嵌入到JSP页面里,这些Java代码将出现在由当前JSP页面生成的Servlet中,使JSP将静态内容与动态内容分离出来.脚本元素包含:  1. ...

  5. Hex string convert to integer with stringstream

    #include <sstream>#include <iostream>int main() { unsigned int x; std::stringstream ss; ...

  6. 学点PYTHON基础的东东--数据结构,算法,设计模式---单向链表

    看来看来,还是以下这个实现最优雅.. 其它的,要么NODE冗余,要么初始化丑陋... #!/usr/bin/env python # -*- coding: utf-8 -*- class Node: ...

  7. jmeter 响应结果分析二

    转自:http://www.cnblogs.com/Carrie_Liang/archive/2008/11/10/1330997.html 前文再续,续接上一回.上一篇讲了如何利用Assertion ...

  8. MVC 导出PDF

    http://www.simple-talk.com/dotnet/asp.net/asp.net-mvc-action-results-and-pdf-content/ http://www.sub ...

  9. 李洪强iOS开发之XMPP

      XMPP历史 这个xmpp框架在2008年开始,不过是一个简单地RFC实现.提供一个最小的代理去接受三种xmpp的基本类型presence.message.iq.因为framwork只提供了最小的 ...

  10. Java List详解

    就是一种集合对象,将所有的对象集中到一起存储. list里面可以放java对象,可以直接放值. List list = new ArrayList(); list.add("AAA" ...