阅读更多

6顶
1踩

Web前端

转载新闻 纯 CSS3 实现的 Twitter 图画

2010-06-22 15:46 by 副主编 just_cool 评论(7) 有4965人浏览

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

来自: comsharp
6
1
评论 共 7 条 请登录后发表评论
7 楼 yuyue618 2010-06-23 09:03
和之前日本的机器猫一样的概念嘛
6 楼 geminiyellow 2010-06-23 08:20
其实我更喜欢IE的效果。
5 楼 javaTo 2010-06-23 00:56
这是闲的蛋疼的人玩的
4 楼 lpp333 2010-06-22 20:54
我这里CPU 70%
3 楼 zhida 2010-06-22 18:43
Chrome 也是100% 啊
2 楼 zhida 2010-06-22 18:39
Safari CPU 100%, ~~~
1 楼 alanjaver 2010-06-22 15:54
很美很牛逼

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • C#引用库文件WMPLib

    缺少WMPLib、不想安装Media Player的可以下载使用. 本人验证,已在项目中使用

  • WindowsMediaPlayer控件一些用法(中文)

    URL:String; 指定媒体位置,本机或网络地址uiMode:String; 播放器界面模式,可为Full, Mini, None, Invisible(不计大小写)playState:integer; 播放状态。这个属性改变时同时引发PlayStateChange事件与StateChange事件。取值范围为枚举型:WMPLib.WMPPlayState,它的成员如下:  wmppsUndef

  • 利用WMPLib在Windows mobile下播放Mp3

    程序示例(C#智能设备应用程序): 必须添加对wmp.dll的引用(项目->添加引用->windows/system32/wmp.dll)。 源文件: //CMediaControl.cs:定义了控制媒体播放的类CMediaControl。 using System.Collections.Generic; using System; using System.Wind...

  • windows mobile中利用WMPLib播放MP3文件(转载)

    程序示例(C#智能设备应用程序):必须添加对wmp.dll的引用(项目->添加引用->windows/system32/wmp.dll)。源文件: CMediaControl.cs:定义了控制媒体播放的类CMediaControl。using System.Collections.Generic;using System;using System.Windows.Forms

  • C++的进程间响应技术

                               C++的进程间响应技术  吴小岭在 Windows环境中,一个应用程序按指定方式响应另一个应用程序的解决方法一般是利用 DDE,这需要作出响应的一方提供DDE服务。但是,如果作出响应的一方没有这种服务,我们就没有别的办法了吗?当然有,那就是向应用程序发送消息,应用程序接收到标准的 Windows消息后,就会完成相应的操作。   要向应用

  • 静态使用DLL动态连接库

    一、首先创建一个DLL工程。1)  在bcb集成环境中,通过菜单File | new | other打开new Items对话框,选中DLL Wizar项,选中C++,选中Use VCL,确定。系统会自动创建一个DLL工程,内容如下:    //-------------------------------------------------------------------------

  • C++图像处理 -- 图像黑白调整应用

    阅读提示:    《C++图像处理》系列以代码清晰,可读性为主,全部使用C++代码。    《Delphi图像处理》系列以效率为侧重点,一般代码为PASCAL,核心代码采用BASM。    尽可能保持二者内容一致,可相互对照。    本文代码必须包括《C++图像处理 -- 数据类型及公用函数》文章中的BmpData.h头文件。     Photoshop CS的图像黑白调整功能,是通过对红、黄、绿

  • 取得拨号上网时动态分配IP的两种方法

                  取得拨号上网时动态分配IP的两种方法1:使用socket函数。在拨号前先取得所有本地IP,记录到字符串列表里。拨号成功后再遍历一次所有本地IP,和已经记录在字符串列表里IP比较。新增加的IP地址就是拨号上网时动态分配IP了。2:使用和RAS有关API。在vc里可以方便使用和ras相关的API。但在C++Builder 6里会出现由版本不同引起的错误。所以在BCB

  • 用c++builder6.0开发小闹钟(用于提醒自己不要盯着屏幕太久)

    基本要求:设想是有两个时间:专注时间和休息时间,这两个是可以设置的。专注时间一到,音乐响起,然后就停下手上的工作,休息;紧接其后,休息时间一到,相关的音乐响起,继续回来工作。

  • WMPLib实现音乐播放器

    前言   现在网上有很多的音乐播放器,但好像都不是.net平台做的,在.net中实现音乐文件的播放功能很简单,下面就简单实现下。 SoundPlayer类   在.net提供了音乐文件的类:SoundPlayer,但是只支持.wav格式,我们用的时候一般是播放系统文件,比如一些提示声音等。代码很简单: 1 SoundPlayer play...

  • 深入QuickReport(一)

    深入QuickReport(一)作者:董维春(本文已在《CSDN开发高手》04年第一、二、三期上发表,应广大网友的要求,经编辑同意,发表在CSDN作者本人文档中,略有修改,但仅即于此,未经CSDN或作者本人同意任何个人与网站不得转载、摘抄,否则任何涉及到版权的行为后果自负) 报表是数据库应用程序的基本组成部分之一,完整的数据库应用程序总要提供报表功能。与传统的数据库应用程序设计工具

  • 深入QuickReport(三)

    深入QuickReport(三) 作者:董维春 (本文已在《CSDN开发高手》04年第一、二、三期上发表,应广大网友的要求,经编辑同意,发表在CSDN作者本人文档中,略有修改,但仅即于此,未经CSDN或作者本人同意任何个人与网站不得转载、摘抄,否则任何涉及到版权的行为后果自负)   第三部分:报表中的其他问题     通过前两部分的学习,我想你对QuickRep已经有了一定的掌握,在这部分我们对报

  • 深入QuickReport(二)

    深入QuickReport(二) 作者:董维春 (本文已在《CSDN开发高手》04年第一、二、三期上发表,应广大网友的要求,经编辑同意,发表在CSDN作者本人文档中,略有修改,但仅即于此,未经CSDN或作者本人同意任何个人与网站不得转载、摘抄,否则任何涉及到版权的行为后果自负)   第二部分:深入QuickReprot例程   在应用中学习,在实践中进步,这是我学习QuickReport的最大感受

  • 在BCB中轻松使用ActiveX控件

    在BCB中轻松使用ActiveX控件          (版权要求:本文除了经过CSDN授权或作者同意,不得转载)在微软的大力扶持下,越来越多的软件公司开始支持ActiveX了,这对于喜欢编程的朋友来说可是件值得高兴的事!因为我们可以在程序中很方便地调用外部的OCX文件来实现复杂的功能,而在BCB中只带有很少几个ActiveX控件,大部分我们需要我们自己安装,下面通过对RealPlayer

  • 用CB编写网络电视

    作者:董维春CSDN专栏作家(ch_builder),CB论坛ActiveX/COM/DCOM栏目斑主,有多篇文章发表在《程序员》杂志上。BLOG:http://blog.csdn.net/ch_builder研究方向:小型数据库开发、报表开发、Office办公系统应用邮箱:ch_builder@163.comQQ:116001522 注:本文已发表在《编程技巧与维护》

Global site tag (gtag.js) - Google Analytics