純 CSS3 實現的 Twitter 圖畫

上過 Twitter 的人都知道下面的這幅圖片,這是 Twitter 的出錯畫面。一位叫 Steve Dennis 的新西蘭 Web 前端設計師,使用純 CSS 生成了這幅畫面,甚至,假如你使用基于 Webkit 的瀏覽器(Safari 或 Chrome),畫面還可以動,不過,對 IE 瀏覽器,生成的效果還差強人意。

作者的靈感來自 Twitter 的一次宕機,當 Twitter 頁面上出現這個畫面,他突發奇想,希望用 CSS 生成一幅同樣的圖畫,并加上動畫效果。

如何實現

事實上很不容易,純手工編碼,不斷的試驗與失敗。曲線使用 CSS 的圓角功能,復雜線條則使用容器遮罩,花了一個周末,很有趣,但不想再嘗試第二回。

在 IE 里怎么樣

以下是在 IE8 里面生成的效果截圖,差強人意。

IE8's whale fails.

反饋

作者的博客中,獲得了百余條反饋,有人提到在 iPhone 中顯示有些問題,但在 Android 中顯示很完美。但無一例外都對這一 CSS 作品表現出由衷的敬意,也有人提到用 SVG 實現更容易,不過,這一工作的意義在于對 CSS 的能力進行一次殘酷測試,看來 CSS 挺過來了,雖然過程有些痛苦。

本文國際來源:subcide.com Pure CSS Twitter Fail Whale (原文作者:Steve Dennis)

中文編譯來源:銳商企業CMS 網站內容管理系統 官方網站





評論
...
發表評論


用戶


評論(不超過1000字)


 4 - 4 = ? 請將左邊的算術題的結果填寫到左邊的輸入框  


  發送給朋友| 打印友好
7 x 12 小時服務熱線
0532 - 83669660
微信: comsharp
QQ: 13885509
QQ: 592748664
Skype: comsharp