明天就是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. JavaScript技巧45招

    原文:45 Useful JavaScript Tips, Tricks and Best Practices作者:Saad Mousliki 在这篇文章里,我将分享一些JavaScript的技巧.秘 ...

  2. Oracle bug 使用max或min函数into到一个char类型报字符缓冲区太小的错误

    这个BUG出现会报错如下: selectto_char(max(RENEWAL_DATE)) intoM_YEAR_MONTH fromt_renewal_schedule; ORA-06502: P ...

  3. liunx命令之whereis、which、find的区别和联系

    liunx命令之whereis.which.find的区别和联系

  4. C++ 虚函数表解析(转载)

    转载自:陈皓 http://blog.csdn.net/haoel/article/details/1948051/ 前言 C++中的虚函数的作用主要是实现了多态的机制.关于多态,简而言之就是用父类型 ...

  5. EXTJS 4.2 资料 控件之Window窗体添加html

    //这里要跳转页面 var subWindow = new Ext.Window({ title: '窗口', width: width, height: height, modal: true,// ...

  6. xcode 上 crash 调试的三种方法

    最近有新人问crash调试方法,简介记录如下: 模拟器调试 打开控制台查看输出日志 显示出错的行数 显示出错的函数iOS Crash跟踪 真机调试 首先修改真机调试的 bundle ID,使代码可以进 ...

  7. java第三课:分支结构、循环结构

    分支结构 1.if后面可以不加{},但是不建议,容易产生误解2.写程序的时候先防屌丝测试,再写逻辑,否则会出错3.if:一条分支 if else:两条分支 if...else if...:多条分支(结 ...

  8. wordpress如何删除没有文章的tags标签

    wordpress站点除了可以按博客category分类外,还可以在写文章的时候适当添加tags标签(当然,if you are lazy,哈哈,可以安装auto tag插件来实现),发布的posts ...

  9. ***用php的strpos() 函数判断字符串中是否包含某字符串的方法

    判断某字符串中是否包含某字符串的方法 if(strpos('www.idc-gz.com','idc-gz') !== false){ echo '包含'; }else{ echo '不包含'; } ...

  10. 一个简单的C#加密解密类

    //DES默认密钥向量 private static byte[] Keys = { 0x12, 0x34, 0x56, 0x78, 0x90, 0xAB, 0xCD, 0xEF }; /// < ...