愚人节巧用CSS开个极客式玩笑以chrome为例

愚人节到了,如果你想和那些要上网的朋友或同事开个极客式玩笑,那就来试试这些CSS吧。 免责声明:恶搞带来的所有后果,请恶搞者自行负责。本站不承担任何责任。 

注:本文以chrome为例 

1. 网页上下颠倒


代码如下:


body { 
-webkit-transform: rotate(180deg); 
}


愚人节巧用CSS开个极客式玩笑以chrome为例    三联
2. 网页旋转

代码如下:


body { 
-webkit-animation: spin 5s linear infinite; 
}


3. 网页中所有图片上下颠倒


代码如下:


img { 
-webkit-transform: rotate(180deg); 
}


4. 网页中所有图片都自转

新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

代码如下:


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


有些网站会不起作用,往下翻网页,有种自由下落的感觉 

发布了80 篇原创文章 · 获赞 11 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/html168/article/details/104524956