愚人節(jié)巧用CSS開(kāi)個(gè)極客式玩笑以chrome為例
發(fā)布時(shí)間：2014-04-01 17:24:48 作者：佚名 
我要評(píng)論
我要評(píng)論惡搞的內(nèi)容有網(wǎng)頁(yè)上下顛倒、網(wǎng)頁(yè)旋轉(zhuǎn)、網(wǎng)頁(yè)中所有圖片上下顛倒、網(wǎng)頁(yè)中所有圖片都自轉(zhuǎn)、網(wǎng)頁(yè)倒在地上了等等，下面是對(duì)應(yīng)的代碼，有些網(wǎng)站會(huì)不起作用，往下翻網(wǎng)頁(yè)，有種自由下落的感覺(jué)
愚人節(jié)到了，如果你想和那些要上網(wǎng)的朋友或同事開(kāi)個(gè)極客式玩笑，那就來(lái)試試這些CSS吧。 免責(zé)聲明：惡搞帶來(lái)的所有后果，請(qǐng)惡搞者自行負(fù)責(zé)。本站不承擔(dān)任何責(zé)任。
注：本文以chrome為例
1. 網(wǎng)頁(yè)上下顛倒
body {
-webkit-transform: rotate(180deg);
}
2. 網(wǎng)頁(yè)旋轉(zhuǎn)
body {
-webkit-animation: spin 5s linear infinite;
}
3. 網(wǎng)頁(yè)中所有圖片上下顛倒
img {
-webkit-transform: rotate(180deg);
}
4. 網(wǎng)頁(yè)中所有圖片都自轉(zhuǎn)
img {
-webkit-animation: spin 1s linear infinite;
}
5. 網(wǎng)頁(yè)倒在地上了（請(qǐng)用內(nèi)容超過(guò)多屏的網(wǎng)頁(yè)測(cè)試）
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;
}
有些網(wǎng)站會(huì)不起作用，往下翻網(wǎng)頁(yè)，有種自由下落的感覺(jué)
以上僅供娛樂(lè)哦大笑
注：本文以chrome為例
1. 網(wǎng)頁(yè)上下顛倒
復(fù)制代碼
代碼如下:body {
-webkit-transform: rotate(180deg);
}
2. 網(wǎng)頁(yè)旋轉(zhuǎn)
復(fù)制代碼
代碼如下:body {
-webkit-animation: spin 5s linear infinite;
}
3. 網(wǎng)頁(yè)中所有圖片上下顛倒
復(fù)制代碼
代碼如下:img {
-webkit-transform: rotate(180deg);
}
4. 網(wǎng)頁(yè)中所有圖片都自轉(zhuǎn)
復(fù)制代碼
代碼如下:img {
-webkit-animation: spin 1s linear infinite;
}
5. 網(wǎng)頁(yè)倒在地上了（請(qǐng)用內(nèi)容超過(guò)多屏的網(wǎng)頁(yè)測(cè)試）
復(fù)制代碼
代碼如下: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;
}
有些網(wǎng)站會(huì)不起作用，往下翻網(wǎng)頁(yè)，有種自由下落的感覺(jué)
以上僅供娛樂(lè)哦大笑
相關(guān)文章
jQuery JavaScript與CSS開(kāi)發(fā)入門(mén)經(jīng)典((約克).施宏斌等著) PDF [42M]
濃墨重彩地描述iQuery的API及iQuery框架的所有基礎(chǔ)知識(shí)，在實(shí)例引導(dǎo)下演示如倒使用iQuery架以超越純JavaScrjpt的速度實(shí)現(xiàn)更多功能，以及如何使用最少代碼完成繁瑣任務(wù)2013-03-27使用jQuery 學(xué)習(xí)JavaScript和CSS開(kāi)發(fā) 英文版
Beginning JavaScript and CSS Development with jQuery2009-11-26Dreamweaver代碼片斷提高css開(kāi)發(fā)效率
昨天在看別人blog的時(shí)候發(fā)現(xiàn)DW有這么一個(gè)東西。叫做代碼片斷。 我們可以將常用的css定義寫(xiě)一個(gè)代碼片斷。保存在DW中，作為公用庫(kù)。當(dāng)再次寫(xiě)新的css的時(shí)候可以直接插2008-10-17
外貿(mào)客戶(hù)開(kāi)發(fā)助手 V4.0.6 中文官方安裝版版
如果你還在愁怎么發(fā)展國(guó)外潛在客戶(hù)，如果你對(duì)網(wǎng)絡(luò)營(yíng)銷(xiāo)并不那么精通，別擔(dān)心，這一切都交給外貿(mào)客戶(hù)開(kāi)發(fā)助手2013-10-24
外貿(mào)客戶(hù)挖掘機(jī)(客戶(hù)開(kāi)發(fā)助手) v4.02 官方安裝版
外貿(mào)客戶(hù)挖掘機(jī)是一款可以收集客戶(hù)聯(lián)系資料，發(fā)送廣告內(nèi)容將變的簡(jiǎn)單一體化，鼠標(biāo)點(diǎn)點(diǎn)即可完成的軟件工具2013-10-14CSS通過(guò)RGBa將一個(gè)元素設(shè)置為透明效果
RGBa是一種在CSS中聲明包含透明效果的顏色的方法，通過(guò)RGBa，我們可以將一個(gè)元素設(shè)置為透明，而不會(huì)影響其子元素，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-04-01css樣式的動(dòng)態(tài)添加及顯示和隱藏等零碎用法
css樣式，想必很多從事網(wǎng)頁(yè)布局的朋友對(duì)它很熟悉吧，常見(jiàn)的用法就不說(shuō)了，本文主要為大家介紹下css樣式的零碎用法包括樣式的動(dòng)態(tài)添加及樣式的顯示和隱藏等等，喜歡的朋友可2014-04-01- 鏈接的虛線框影響整體風(fēng)格，我們?cè)诠ぷ鹘?jīng)常會(huì)將它去掉，而采用圖片高亮的方式來(lái)顯示焦點(diǎn)狀態(tài)。然而去掉虛線框在兩種瀏覽器中卻分別對(duì)待，這種技巧經(jīng)常用到，作個(gè)記錄，以備2014-04-01
一個(gè)小腳本HTC文件補(bǔ)丁讓 IE6, 7和 8支持CSS3
有一個(gè)小腳本能夠做到讓 IE6, 7和 8支持CSS3，包括：border-radius (rounded), box-shadow ( shadow), text-shadow等2014-03-31CSS自定義select下拉選擇框的樣式(不用其他標(biāo)簽?zāi)M)
怎么自定義select下拉選擇框的樣式，使用純CSS實(shí)現(xiàn)，把瀏覽器默認(rèn)的樣式覆蓋掉還是有其他的方法，select靠純CSS是不能解決這個(gè)自定義樣式問(wèn)題，下面為大家講解下CSS實(shí)現(xiàn)的2014-03-31
