明天就是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. Node.js的process模块

    process模块用来与当前进程互动,可以通过全局变量process访问,不必使用require命令加载.它是一个EventEmitter对象的实例. 属性 process对象提供一系列属性,用于返回 ...

  2. PHP内置函数

    1 变量函数 a.is_xxx函数用来判断变量类型       is_int.is_integer.is_long,判断变量是否是整型       is_float.is_double.is_real ...

  3. MVC怎么在同一个action返回两个表的数据

    一般返回一个model这样 @model MvcMusicStore.Models.Album 方法: public ActionResult Details(int id) {            ...

  4. 【BZOJ 1934】 [Shoi2007]Vote 善意的投票

    Description 幼儿园里有n个小朋友打算通过投票来决定睡不睡午觉.对他们来说,这个问题并不是很重要,于是他们决定发扬谦让精神.虽然每个人都有自己的主见,但是为了照顾一下自己朋友的想法,他们也可 ...

  5. JSP页面用EL表达式 输出date格式

    JSP页面用EL表达式 输出date格式 1.头上引入标签 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix ...

  6. 用in判断input中的placeholder属性是否在这个对象里

    <input id="test"> var ele = document.getElementById("test"); if("plac ...

  7. spoj 95

    栈应用 ...... 水题 #include<cstdio> #include<cstdlib> #include<cstring> #include<alg ...

  8. 对JAVA动态代理的理解

    叫动态代理就代表着有“静态代理”这回事. 而且,通常“动态”至少听着更NB一点. 关键就在于不明白啥叫“动”,这个得跟“静”比较下. 在我的理解,静态代理得自己声明一个类,实现跟被代理对象同样的接口. ...

  9. 为你的PHP程序选择合适的密码库(初稿)

    如果本文中的术语让你感到疑惑,请先参阅密码学术语及概念一文. 密码学不是魔术.加密一个应用程序并不能保证它在袭击下的安全(特别是在你没有设置验证密文的情况下).但如果出于商业需求你要确保程序的安全,传 ...

  10. SDUT 2527 斗地主

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2527 思路 :以前的结训比赛,当时不会做,比完 ...