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

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

如何實現

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

在 IE 里怎么樣

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

反饋

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

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

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