愚人节巧用CSS开个极客式玩笑以chrome为例
发布时间：2014-04-01 17:24:48 作者：佚名 
我要评论
我要评论恶搞的内容有网页上下颠倒、网页旋转、网页中所有图片上下颠倒、网页中所有图片都自转、网页倒在地上了等等，下面是对应的代码，有些网站会不起作用，往下翻网页，有种自由下落的感觉
愚人节到了，如果你想和那些要上网的朋友或同事开个极客式玩笑，那就来试试这些CSS吧。 免责声明：恶搞带来的所有后果，请恶搞者自行负责。本站不承担任何责任。
注：本文以chrome为例
1. 网页上下颠倒
body {
-webkit-transform: rotate(180deg);
}
2. 网页旋转
body {
-webkit-animation: spin 5s linear infinite;
}
3. 网页中所有图片上下颠倒
img {
-webkit-transform: rotate(180deg);
}
4. 网页中所有图片都自转
img {
-webkit-animation: spin 1s linear infinite;
}
5. 网页倒在地上了（请用内容超过多屏的网页测试）
html, body {
height: 100%;
}
html {
-webkit-perspective: 1000;
}
body {
-webkit-transform-origin: bottom center;
-webkit-transform: rotateX(-90deg);
-webkit-animation: fall 1.5s ease-in;
}
有些网站会不起作用，往下翻网页，有种自由下落的感觉
以上仅供娱乐哦大笑
注：本文以chrome为例
1. 网页上下颠倒
复制代码
代码如下:body {
-webkit-transform: rotate(180deg);
}
2. 网页旋转
复制代码
代码如下:body {
-webkit-animation: spin 5s linear infinite;
}
3. 网页中所有图片上下颠倒
复制代码
代码如下:img {
-webkit-transform: rotate(180deg);
}
4. 网页中所有图片都自转
复制代码
代码如下:img {
-webkit-animation: spin 1s linear infinite;
}
5. 网页倒在地上了（请用内容超过多屏的网页测试）
复制代码
代码如下:html, body {
height: 100%;
}
html {
-webkit-perspective: 1000;
}
body {
-webkit-transform-origin: bottom center;
-webkit-transform: rotateX(-90deg);
-webkit-animation: fall 1.5s ease-in;
}
有些网站会不起作用，往下翻网页，有种自由下落的感觉
以上仅供娱乐哦大笑
相关文章
jQuery JavaScript与CSS开发入门经典((约克).施宏斌等著) PDF [42M]
浓墨重彩地描述iQuery的API及iQuery框架的所有基础知识，在实例引导下演示如倒使用iQuery架以超越纯JavaScrjpt的速度实现更多功能，以及如何使用最少代码完成繁琐任务2013-03-27使用jQuery 学习JavaScript和CSS开发 英文版
Beginning JavaScript and CSS Development with jQuery2009-11-26- 昨天在看别人blog的时候发现DW有这么一个东西。叫做代码片断。 我们可以将常用的css定义写一个代码片断。保存在DW中，作为公用库。当再次写新的css的时候可以直接插2008-10-17
如果你还在愁怎么发展国外潜在客户，如果你对网络营销并不那么精通，别担心，这一切都交给外贸客户开发助手2013-10-24
外贸客户挖掘机是一款可以收集客户联系资料，发送广告内容将变的简单一体化，鼠标点点即可完成的软件工具2013-10-14- RGBa是一种在CSS中声明包含透明效果的颜色的方法，通过RGBa，我们可以将一个元素设置为透明，而不会影响其子元素，下面有个不错的示例，大家可以参考下2014-04-01
- css样式，想必很多从事网页布局的朋友对它很熟悉吧，常见的用法就不说了，本文主要为大家介绍下css样式的零碎用法包括样式的动态添加及样式的显示和隐藏等等，喜欢的朋友可2014-04-01
- 链接的虚线框影响整体风格，我们在工作经常会将它去掉，而采用图片高亮的方式来显示焦点状态。然而去掉虚线框在两种浏览器中却分别对待，这种技巧经常用到，作个记录，以备2014-04-01
- 有一个小脚本能够做到让 IE6, 7和 8支持CSS3，包括：border-radius (rounded), box-shadow ( shadow), text-shadow等2014-03-31
CSS自定义select下拉选择框的样式(不用其他标签模拟)
怎么自定义select下拉选择框的样式，使用纯CSS实现，把浏览器默认的样式覆盖掉还是有其他的方法，select靠纯CSS是不能解决这个自定义样式问题，下面为大家讲解下CSS实现的2014-03-31
最新评论