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