用 css 画了个 iPhone 5s

爱意满满的作品展示区。

This topic created in 4467 days ago, the information mentioned may be changed or developed.

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

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

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

CSS3

settings

iphone4

75 replies • 1970-01-01 08:00:00 +08:00

atan

Mar 13, 2014

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

serenader

Mar 13, 2014

赞楼主的耐心。。。

markmx

Mar 13, 2014

这个叫佩服呀。。

arbipher

Mar 13, 2014

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

wingoo

Mar 13, 2014

赞下

explon

Mar 13, 2014 via iPhone

不支持 iPhone 划动..

mikuazusa

Mar 13, 2014

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

mikuazusa

Mar 13, 2014

秒针，打错了...

yinxingren

Mar 13, 2014

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

double

Mar 13, 2014

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

joyqi

Mar 13, 2014

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

P233

Mar 13, 2014

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

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

@yinxingren 应该是偏左了一点点

double

Mar 13, 2014

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

Mihuwa

Mar 13, 2014 via iPhone

很赞。

double

Mar 13, 2014

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

double

Mar 13, 2014

@P233 赞动画^^

yinxingren

Mar 13, 2014

@double 已经很赞了~~

Luciush

Mar 13, 2014

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

beakey

Mar 14, 2014 via iPhone

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

emric

Mar 14, 2014

炒鸡赞,

ceclinux

Mar 14, 2014

不得不赞～

zxy

Mar 14, 2014

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

lukic

Mar 14, 2014

赞。

SamZeng

Mar 14, 2014

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

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

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

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

真的很赞！