紧急：运维在吗？现在要发个版本！

愚人节的凌晨，来吧，看看要发个啥版本。

每年的愚人节都会遇到各种网站，做出各种效果，翻转、倾斜、破碎、黑洞等等，今天我们就来分享一些常见的愚人节网页CSS特效，感兴趣的你，可以去尝试下，很好玩的。

倾斜45度角

body {

transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

}

翻转的度数可以随意调整了，例如改成180，那就整个网页呈现上下颠倒状态了，试试吧。

翻转效果

html{

filter: fliph;/*ie fliph(水平翻转滤镜)，还有flipv垂直翻转滤镜*/

}

body{

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

-moz-transform: skew(0deg, 180deg) scale(-1, 1);

-o-transform: skew(0deg, 180deg) scale(-1, 1);

}

倾斜翻转的特效可以参照今天OSC官网的特效

利用上面的CSS样式，可以将页面由页面倾斜扩展的页面晃动，利用JS的定时器，定时设置CSS即可。

除此之外，还可以使用jQuery插件，来实现更多的更变态的愚人功能。这里提供一个叫fool.js（可以在GitHub搜索，文章下面也后仓库地址）的插件，专门做这种页面效果的。里面包含了包含了下面几种页面特效：

消失的滚动条

莫名其妙播放的音乐

随机消失的页面元素

不间断的弹出傻x的问题

页面颠倒

页面扭曲

页面闪烁

无限循环

浏览器崩溃

页面突然变纯黑

无法点击

整个页面可编辑

Fool玩法

1.第一步当然是下载fool.js啦

2.特效代码调用

$(document).ready(function() { // When the document is ready

$.fool('flash'); // Run the Rick Astley prank

});

3.配置各种不同的愚人特效

$.fool({

hiddenVideos: true, // Show some wonderfully annoying videos

vanishingElements: true, // Hide random elements as they interact

});

4.fool.js具有特效选项设置：

fallingScrollbar: true, // Want the scrollbar to fall over?

rick: true, // The synonymous Rick Astley video, hidden off-screen

hiddenVideos: true, // Show some wonderfully annoying videos

vanishingElements: true, // Hide random elements as they interact

questionTime: true, // Sing Spongebob with your browser!

upsideDown: true, // Flip the page upside down!

h4xx0r: true, // Make the page 100% editable

wonky: true, // Make the page a little bit crooked

flash: true, // Makes the site flash on and off

crashAndBurn: true, // Runs an endless loop. This will kill your browser!

shutter: true, // Forces a shutter on the screen

unclickable: true, // Makes the page unclickable

Fool源码仓库地址：https://github.com/idiot/Fool.js

Enjoy~