用 css 画了个 iPhone 5s

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3899 天前的主题，其中的信息可能已经有所发展或是发生改变。

想要学css3，然后受到TjRus的启发（他用css3画了iphone4，地址： http://tjrus.com/iphone/ ），于是决定从画iphone5学起。

捣鼓了好些天终于完工，不算很完美，settings这个icon是最后一个画的，因为一直没想好怎么实现，如果你想到怎么优雅的画出这个图标，请告诉我，谢谢。

Demo在这里：
http://carrisa.github.io/iphone/

CSS3

settings

iphone4

75 条回复 • 1970-01-01 08:00:00 +08:00

atan

2014-03-13 22:40:30 +08:00

赞的，细节处理的很到位啊

serenader

2014-03-13 22:47:24 +08:00

赞楼主的耐心。。。

markmx

2014-03-13 22:55:44 +08:00

这个叫佩服呀。。

arbipher

2014-03-13 22:58:15 +08:00

赞一记。
楼主楼主，你的头像也是CSS画的吗？

wingoo

2014-03-13 22:58:31 +08:00

赞下

explon

2014-03-13 22:58:53 +08:00 via iPhone

不支持 iPhone 划动..

mikuazusa

2014-03-13 22:59:59 +08:00

厉害啊，话说有个细节给个建议：IOS7桌面时钟的秒钟转动是近似连续的，而不是像时钟那样给人感觉有一定的停顿，所以这里的rotate建议加个线性渐变。

mikuazusa

2014-03-13 23:00:30 +08:00

秒针，打错了...

yinxingren

2014-03-13 23:04:00 +08:00

为啥我感觉HOME键偏左了。。

double

2014-03-13 23:08:00 +08:00

@explon 对的，偷懒没有响应移动端的划动……

joyqi

2014-03-13 23:08:10 +08:00

@yinxingren 是的，最下面一排图标没对齐。不过已经非常赞了

P233

2014-03-13 23:09:53 +08:00

建议楼主发到 Codepen，太有耐心了！

跟个 iOS7 动画 http://codepen.io/P233/pen/Gluka

@yinxingren 应该是偏左了一点点

double

2014-03-13 23:11:05 +08:00

@mikuazusa 观察很仔细诶！我做完也发现了，也是一个待改的细节，谢谢建议^^

Mihuwa

2014-03-13 23:12:26 +08:00 via iPhone

很赞。

double

2014-03-13 23:14:58 +08:00

@yinxingren 眼睛好厉害！我画到后来要崩溃啦。。然后就懒得去算像素应该偏多少，大部分就估计一个值了，太糙了我。。

double

2014-03-13 23:15:54 +08:00

@P233 赞动画^^

yinxingren

2014-03-13 23:19:13 +08:00

@double 已经很赞了~~

Luciush

2014-03-13 23:46:45 +08:00

強迫症患者表示，po 主能把iPhone 5s 改一下嗎？大小寫，中間空格。

beakey

2014-03-14 01:09:39 +08:00 via iPhone

时间分钟是个位数的时候应该是 0x

emric

2014-03-14 01:50:56 +08:00

炒鸡赞,

ceclinux

2014-03-14 02:17:37 +08:00

不得不赞～

zxy

2014-03-14 08:49:15 +08:00

赞一个！！！
非常佩服，给办公室同事们看了，让他们都拜服于你！
不过时钟指针时粗时细...不知道是不是因为我的firefox 27.0.1

lukic

2014-03-14 08:59:24 +08:00

赞。

SamZeng

2014-03-14 09:07:28 +08:00

*很赞！* 耐心已经完胜所有技术了，我也耐心的看了。

Mac OS X 10.9.2, Chrome Version 33.0.1750.149，对照是手上的 IP5, iOS 7.1

* WIFI 那里感觉有点粗
* 电池有点长，且没靠右
* 锁屏时间显示文字有点粗
* slide to unlock 左边的 arrow 与文字有点近，且没与文字对齐
* 听筒有点偏左
* 锁屏最上方没有时间，而是一个下拉的触发

因为 7.1 调整了图标的色，这里就不比对了。

真的很赞！

Mutoo

2014-03-14 09:08:25 +08:00

好厉害，连飞机都画出来了

haishan

2014-03-14 09:14:50 +08:00

牛呀

unnya

2014-03-14 09:29:45 +08:00

HOME键不在正中间
简直是必死强迫症！！！！

ffts

2014-03-14 10:11:47 +08:00

卧槽，好棒

arcas

2014-03-14 10:29:35 +08:00

强迫症啊！！ HOME键没居中、电池电量没满！、信号没满格！、、

yuanyiz

2014-03-14 10:45:04 +08:00

赞一个，滑动解锁那个文字和时钟没有动

Showfom

2014-03-14 11:25:46 +08:00 via iPhone

楼主我想保养你帮我画个头像

xoxo

2014-03-14 12:33:18 +08:00

楼主是文艺女青年

ss098

2014-03-14 12:35:14 +08:00

楼主的iPhone画的非常赞！

andybest

2014-03-14 12:37:09 +08:00

楼主你手机的电源键不能用

wdkwdkwdk

2014-03-14 12:37:21 +08:00

楼主有没有男朋友啊

favormm

2014-03-14 12:41:34 +08:00 via iPhone

太赞了。

wuyazi

2014-03-14 12:42:05 +08:00

太神奇了，赞一下

double

2014-03-14 12:44:51 +08:00

@zxy 这个问题我在画stock的曲线时也发现了，在chrome下也有这个问题。似乎是rotate的表现问题，宽1px的li在rotate到不同角度视觉上的宽度是不同的，google也没找到合理的解释，希望有牛人能给以解答。

double

2014-03-14 12:52:50 +08:00

@SamZeng 感谢你的耐心^^
bug还是很多啊~
很多地方没有仔细抠像素，山寨感略重。最后一条是我疏忽啦，文字字体在windows下看应该是Arial，而不是IOS7采用的HelveticaNeue-Light，有些差异

double

2014-03-14 12:58:03 +08:00

@arcas 所以你被逼死了么……

double

2014-03-14 13:05:06 +08:00

@yuanyiz ？不是很明白你的意思

linuxer

2014-03-14 13:05:23 +08:00

无论在哪里，都有高贵冷艳的强迫症患者。

double

2014-03-14 13:07:19 +08:00

@xoxo 这个结论是怎么得出的……

soli

2014-03-14 13:09:10 +08:00

赞一个！

double

2014-03-14 13:11:03 +08:00

@andybest 对的，可交互的内容很少，除了unlock其他键都没响应的

double

2014-03-14 13:13:58 +08:00

@Mutoo 灰机很好画的啦，画两个梯形skew一下就是机翼了

selectSum

2014-03-14 13:18:44 +08:00

牛逼

PotatoBrother

2014-03-14 13:27:02 +08:00 via iPhone

爪机操作无力……

jandan

2014-03-14 13:30:41 +08:00

牛人啊

yangg

2014-03-14 14:08:13 +08:00

14:7 不应该显示成14:07么？

lj0014

2014-03-14 14:19:34 +08:00

赞啊，unlock后不能lock吗

yuanyiz

2014-03-14 14:32:02 +08:00

@double 就是滑动解锁的时候只有那个 > 在动，应该是整个页面跟着一起向右滑

frye

2014-03-14 14:58:05 +08:00

果然NB

wahyd4

2014-03-14 15:07:43 +08:00

很fancy啊

Sdhjt

2014-03-14 15:35:46 +08:00

赞一个！

freshfish

2014-03-14 15:42:58 +08:00

一个图片都没有，很不错！

Zkiller

2014-03-14 15:54:51 +08:00

Nice！

loryyang

2014-03-14 16:16:40 +08:00

非常nice！赞

along

2014-03-14 23:20:05 +08:00

太佩服了？这是个妹子？好友耐心啊！

hqman

2014-03-15 08:13:36 +08:00

国际范

hydyy

2014-03-15 12:26:52 +08:00

不错哦你现在在哪里工作啊

zolinbook

2014-03-15 20:34:38 +08:00

赞。

suprod

2014-03-16 01:05:50 +08:00

年逼闪闪

xx314327475

2014-03-16 09:34:14 +08:00

赞一个

javababy

2014-03-16 21:42:48 +08:00

不可思议!

imskull

2014-03-16 23:24:14 +08:00

css有必要练成这样吗？没必要吧？有必要吗？loop n...

luahou

2014-03-16 23:53:57 +08:00

32个赞。

dragonszy

2014-03-17 12:59:03 +08:00

仔细看了下iphone，发现clock的指针真的在动额。

shuson

2014-03-20 11:03:04 +08:00

敢为楼主变弯

dancingbear

2014-03-20 14:37:00 +08:00

这是怎么画的，有工具吗？

double

2014-03-20 16:55:23 +08:00

@dancingbear 用CSS码的

duteng612

2014-03-22 20:37:55 +08:00

楼主真是很有GEEK精神，佩服中，码了2600+行

aaronlam

2014-03-23 21:22:36 +08:00

佩服了！楼主，如果要做到像你这样需要学CSS之外还要学什么呢？

6711411

2014-03-24 13:55:25 +08:00

给跪了.

win2next

2014-04-09 16:52:22 +08:00

太牛逼了，我怎么这么烂，捶地