纯 CSS3 实现的 Twitter 图画

上过 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
网站内容管理系统
官方网站