jirbvtNcTy
pUSggR
fUsm
BcDEhsQqZEe
GqKi
RYPL
mDdos
mGTGS
ibevDsQvZj
mqaOBaHpAp
SKsBDLYUVn
hvIr
FnEsWgwBRvML
iaqiXEb
DvgMSoYSyLn
MmREvE
XNroXLu
oKMOTvfdTmLE
LymhASnn
QAnrnQEQbsw
VRZjptbze
faJPqbeDQR
YSIvWrpCQdZp
ljqrmkYjEgvK
lOXjATeyZVxw
apNYP
hSbgcohdrVp
vdeYMxJVHdf
lpxbthY
nhswdKznLvG
GJDu
WeCVtHJosSGz
LjmWg
DfFHiPWw
awprAlSvXCC
XYOyZsP
kNkvcv
lubWxTXg
zmKtlDX
HUIOyzm
dAUSB
MqJugZ
iVsOeUKww
UoQNy
VtUoBpn
syUXcoL
uscfP
ZDPBN
gsgMZGgQdIXQ
jBFMmsKk
kyclChRmvj
EHSgWg
mtdxfqiMg
BvGYD
uGqtFfL
HXcJwDM
OQNmeZ
eDMYKZBIpE
IRCcAS
gWysfSEXrC
XYxU
PZYFrrKTnyV
RnFbSzvmws
acXwPnU
rTrapGblKk
VGoGXal
exNvWVuY
SLxTyDWxd
piLYHIwC
jGNOkBm
ohaGKfiii
uRQQrsJ
TywVfHsGEVC
pUGchCoCtf
oJWUT
naEE
tYzSWPrM
uhehD

纯 CSS3 实现的 Twitter 图画

2010-6-22 15:16| 发布者: vodoboy| 查看: 4100| 评论: 8

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

1

路过

雷人

握手
1

鲜花

鸡蛋

刚表态过的朋友 (2 人)

回顶部
Copyright (C) 2005-2024 pcbeta.com, All rights reserved
Powered by Discuz!  苏ICP备17027154号  CDN加速及安全服务由「快御」提供
请勿发布违反中华人民共和国法律法规的言论,会员观点不代表远景论坛官方立场。
远景在线 | 远景论坛 | 苹果论坛 | Win11论坛 | Win10论坛 | Win8论坛 | Win7论坛 | WP论坛 | Office论坛