上过 Twitter 的人都知道下面的这幅图片,这是 Twitter 的出错画面。一位叫 Steve Dennis 的新西兰 Web 前端设计师,使用纯 CSS 生成了这幅画面,甚至,假如你使用基于 Webkit 的浏览器(Safari 或 Chrome),画面还可以动,不过,对 IE 浏览器,生成的效果还差强人意。

作者的灵感来自 Twitter 的一次宕机,当 Twitter 页面上出现这个画面,他突发奇想,希望用 CSS 生成一幅同样的图画,并加上动画效果。
如何实现
事实上很不容易,纯手工编码,不断的试验与失败。曲线使用 CSS 的圆角功能,复杂线条则使用容器遮罩,花了一个周末,很有趣,但不想再尝试第二回。
在 IE 里怎么样
以下是在 IE8 里面生成的效果截图,差强人意。

反馈
作者的博客中,获得了百余条反馈,有人提到在 iPhone 中显示有些问题,但在 Android 中显示很完美。但无一例外都对这一 CSS 作品表现出由衷的敬意,也有人提到用 SVG 实现更容易,不过,这一工作的意义在于对 CSS 的能力进行一次残酷测试,看来 CSS 挺过来了,虽然过程有些痛苦。
CSS3分步详解:transform属性近来,HTML5和CSS3的发展速度还是很可观的,国内外不乏一些大站,酷站都在使用最新的技术。面对新的技术,我们该
纯javascript+CSS3制作精美时钟纯javascript+CSS3制作精美时钟。该实例主要应用了CSS3中transform属性(translate、rotate)、border-radius属性。 CSS样式: sty
jQuery+CSS3制作转动的3D立方体动画实例CSS3动画实例--jQuery+CSS3制作转动的3D立方体动画实例,该实例引用了jQuery v2.0.0插件以及velocity.min.js插件。主要应用了
CSS3 animation 属性实例应用一、CSS3 animation 简介 在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是Keyframes,我们把他叫做关键帧
CSS3渐变背景动画应用CSS3渐变背景动画应用,严格来说,目前各个浏览器都还不支持css3的渐变背景的动画,所以在制作的时候我们要灵活变
CSS3-Box-shadow阴影效果用法趣味讲解随着技术的发展,代码在不断的进步,进而替代一些图片所能实现的效果,其中CSS3属性中Box-shadow表现阴影效果是现代