今天是愚人节,以前每年的愚人节都会遇到各种网站,做出各种效果,什么翻转,倾斜,破碎等等,记得还有一个网站是专门搞各种愚人节网页特效,不过不记得网址了,今天准备找找的,却搜不到。
(倾斜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~
未经允许不得转载:欲思博客 » 愚人节网页恶搞特效代码:网页倾斜、翻转、闪烁、晃动等各种效果
评论抢沙发