愚人节网页恶搞特效代码:网页倾斜、翻转、闪烁、晃动等各种效果

今天是愚人节,以前每年的愚人节都会遇到各种网站,做出各种效果,什么翻转,倾斜,破碎等等,记得还有一个网站是专门搞各种愚人节网页特效,不过不记得网址了,今天准备找找的,却搜不到。

愚人节网页恶搞特效代码:网页倾斜、翻转、闪烁、晃动等各种效果

(倾斜5度角)

 body {
 transform: rotate(-5deg);
 -moz-transform: rotate(-5deg);
 -webkit-transform: rotate(-5deg);
 -o-transform: rotate(-5deg);
 }

(翻转效果)

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);
 }

 

百人牛牛另外,利用上面的css设置,可以将页面由页面倾斜扩展的页面晃动,利用js的定时器,定时设置css即可,代码如下:

var?i = 1;
var?num = 0.1;
var?j = 20;
var?nums = -17;
function?Jump(){
if(num>0){
num = num + (i*0.1);
}else{
num = num - (i*0.1);
}
num = 0-num;
var?a = document.getElementById("test");
a.innerHTML ="<style> body{-o-transform: rotate("+num+"deg);-webkit-transform: rotate("+num+"deg);-moz-transform: rotate("+num+"deg);}</style>"
i++;
if(i<20){
document.onload = setTimeout("Jump()",500);
}else{
document.onload = setTimeout("Jumps()",500);
}
}
function?Jumps(){
if(nums>0){
nums = nums - (j*0.1);
}else{
nums = nums + (j*0.1);
}
nums = 0-nums;
var?a = document.getElementById("test");
a.innerHTML ="<style> body{-o-transform: rotate("+nums+"deg);-webkit-transform: rotate("+nums+"deg);-moz-transform: rotate("+nums+"deg);}</style>"
j--;
if(j>1){
document.onload = setTimeout("Jumps()",500);
}
}
document.onload = setTimeout("Jump()",3000);

除此之外,还可以使用jquery插件,来实现更多的更变态的愚人功能。这里提供一个叫fool.js的插件,专门做这种页面效果的。里面包含了包含了下面几种页面特效:消失的滚动条、莫名其妙播放的音乐、随机消失的页面元素、不间断的弹出傻x的问题、页面颠倒、页面扭曲、页面闪烁、无限循环 -> 浏览器崩溃、页面突然变纯黑、无法点击、整个页面可编辑。

操作方法:

1.下载fool.js或者fool.min.js文件。(http://github.com/idiot/Fool.js)

百人牛牛2.编写js和html代码。(代码中‘flash’是其中一种效果)

<script type="text/javascript"?src="./lib/fool.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {?//? When the document is ready
 $.fool('flash');?//? Run the Rick Astley prank
 });
 </script>

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

Enjoy~

未经允许不得转载:欲思博客 » 愚人节网页恶搞特效代码:网页倾斜、翻转、闪烁、晃动等各种效果
喜欢(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

在线客服

在线客服

  • 扫描二维码,微信联系 扫描二维码,微信联系