浙江铃声推荐联盟

紧急:运维在吗??现在要发个版本!

Python运维圈2019-07-06 23:40:44

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

每年的愚人节都会遇到各种网站,做出各种效果,翻转、倾斜、破碎、黑洞等等,今天我们就来分享一些常见的愚人节网页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.特效代码调用

<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

https://github.com/idiot/Fool.js

Enjoy~

推荐阅读