巧用css文件愚人节恶搞

月光博客 • 11年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

　　明天就是4月1日愚人节了，也就是那个可适度开玩笑、整蛊的日子了。如果你想和那些要上网的朋友或同事开个极客式玩笑，那就来试试这个国外网友wes bos分享的 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

　　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 代码。

　　来源：伯乐在线&&翻译