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

代码收藏 欲思 0评论

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

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

(倾斜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文件。(https://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~

转载请注明:欲思博客 » 愚人节网页恶搞特效代码:网页倾斜、翻转、闪烁、晃动等各种效果

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (11)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

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