爱意满满的作品展示区。
double

用 css 画了个 iPhone 5s

  •  
  •   double · Mar 13, 2014 · 11310 views
    This topic created in 4619 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/
    75 replies  •  1970-01-01 08:00:00 +08:00
    atan
    atan
    Mar 13, 2014
    1
    赞的,细节处理的很到位啊
    serenader
    serenader
    Mar 13, 2014
    2
    赞楼主的耐心。。。
    markmx
    markmx
    Mar 13, 2014
    3
    这个叫佩服呀。。
    arbipher
    arbipher
    Mar 13, 2014
    4
    赞一记。
    楼主楼主,你的头像也是CSS画的吗?
    wingoo
    wingoo
    Mar 13, 2014
    5
    赞下
    explon
    explon
    Mar 13, 2014 via iPhone
    6
    不支持 iPhone 划动..
    mikuazusa
    mikuazusa
    Mar 13, 2014
    7
    厉害啊,话说有个细节给个建议:IOS7桌面时钟的秒钟转动是近似连续的,而不是像时钟那样给人感觉有一定的停顿,所以这里的rotate建议加个线性渐变。
    mikuazusa
    mikuazusa
    Mar 13, 2014
    8
    秒针,打错了...
    yinxingren
    yinxingren
    Mar 13, 2014
    9
    为啥我感觉HOME键偏左了。。
    double
    double
    OP
    Mar 13, 2014
    10
    @explon 对的,偷懒没有响应移动端的划动……
    joyqi
    joyqi
    Mar 13, 2014
    11
    @yinxingren 是的,最下面一排图标没对齐。不过已经非常赞了
    P233
    P233
    Mar 13, 2014
    12
    建议楼主发到 Codepen,太有耐心了!

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


    @yinxingren 应该是偏左了一点点
    double
    double
    OP
    Mar 13, 2014
    13
    @mikuazusa 观察很仔细诶!我做完也发现了,也是一个待改的细节,谢谢建议^^
    Mihuwa
    Mihuwa
    Mar 13, 2014 via iPhone
    14
    很赞。
    double
    double
    OP
    Mar 13, 2014
    15
    @yinxingren 眼睛好厉害!我画到后来要崩溃啦。。然后就懒得去算像素应该偏多少,大部分就估计一个值了,太糙了我。。
    double
    double
    OP
    Mar 13, 2014
    16
    @P233 赞动画^^
    yinxingren
    yinxingren
    Mar 13, 2014
    17
    @double 已经很赞了~~
    Luciush
    Luciush
    Mar 13, 2014
    18
    強迫症患者表示,po 主能把iPhone 5s 改一下嗎?大小寫,中間空格。
    beakey
    beakey
    Mar 14, 2014 via iPhone
    19
    时间分钟是个位数的时候应该是 0x
    emric
    emric
    Mar 14, 2014
    20
    炒鸡赞,
    ceclinux
    ceclinux
    Mar 14, 2014
    21
    不得不赞~
    zxy
    zxy
    Mar 14, 2014
    22
    赞一个!!!
    非常佩服,给办公室同事们看了,让他们都拜服于你!
    不过时钟指针时粗时细...不知道是不是因为我的firefox 27.0.1
    lukic
    lukic
    Mar 14, 2014❤️1
    23
    赞。
    SamZeng
    SamZeng
    Mar 14, 2014❤️1
    24
    *很赞!* 耐心已经完胜所有技术了,我也耐心的看了。

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

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

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

    真的很赞!
    Mutoo
    Mutoo
    Mar 14, 2014
    25
    好厉害,连飞机都画出来了
    haishan
    haishan
    Mar 14, 2014
    26
    牛呀
    unnya
    unnya
    Mar 14, 2014
    27
    HOME键不在正中间
    简直是必死强迫症!!!!
    ffts
    ffts
    Mar 14, 2014
    28
    卧槽,好棒
    arcas
    arcas
    Mar 14, 2014
    29
    强迫症啊!! HOME键没居中、电池电量没满!、信号没满格!、、
    yuanyiz
    yuanyiz
    Mar 14, 2014
    30
    赞一个,滑动解锁那个文字和时钟没有动
    Showfom
    Showfom
    PRO
    Mar 14, 2014 via iPhone
    31
    楼主我想保养你帮我画个头像
    xoxo
    xoxo
    Mar 14, 2014
    32
    楼主是文艺女青年
    ss098
    ss098
    Mar 14, 2014
    33
    楼主的iPhone画的非常赞!
    andybest
    andybest
    Mar 14, 2014
    34
    楼主你手机的电源键不能用
    wdkwdkwdk
    wdkwdkwdk
    Mar 14, 2014
    35
    楼主有没有男朋友啊
    favormm
    favormm
    Mar 14, 2014 via iPhone
    36
    太赞了。
    wuyazi
    wuyazi
    Mar 14, 2014
    37
    太神奇了,赞一下
    double
    double
    OP
    Mar 14, 2014
    38
    @zxy 这个问题我在画stock的曲线时也发现了,在chrome下也有这个问题。似乎是rotate的表现问题,宽1px的li在rotate到不同角度视觉上的宽度是不同的,google也没找到合理的解释,希望有牛人能给以解答。
    double
    double
    OP
    Mar 14, 2014
    39
    @SamZeng 感谢你的耐心^^
    bug还是很多啊~
    很多地方没有仔细抠像素,山寨感略重。最后一条是我疏忽啦,文字字体在windows下看应该是Arial,而不是IOS7采用的HelveticaNeue-Light,有些差异
    double
    double
    OP
    Mar 14, 2014
    40
    @arcas 所以你被逼死了么……
    double
    double
    OP
    Mar 14, 2014
    41
    @yuanyiz ?不是很明白你的意思
    linuxer
    linuxer
    Mar 14, 2014
    42
    无论在哪里,都有高贵冷艳的强迫症患者。
    double
    double
    OP
    Mar 14, 2014
    43
    @xoxo 这个结论是怎么得出的……
    soli
    soli
    Mar 14, 2014
    44
    赞一个!
    double
    double
    OP
    Mar 14, 2014
    45
    @andybest 对的,可交互的内容很少,除了unlock其他键都没响应的
    double
    double
    OP
    Mar 14, 2014
    46
    @Mutoo 灰机很好画的啦,画两个梯形skew一下就是机翼了
    selectSum
    selectSum
    Mar 14, 2014
    47
    牛逼
    PotatoBrother
    PotatoBrother
    Mar 14, 2014 via iPhone
    48
    爪机操作无力……
    jandan
    jandan
    Mar 14, 2014
    49
    牛人啊
    yangg
    yangg
    Mar 14, 2014
    50
    14:7 不应该 显示成14:07么?
    lj0014
    lj0014
    Mar 14, 2014
    51
    赞啊,unlock后不能lock吗
    yuanyiz
    yuanyiz
    Mar 14, 2014
    52
    @double 就是滑动解锁的时候只有那个 > 在动,应该是整个页面跟着一起向右滑
    frye
    frye
    Mar 14, 2014
    53
    果然NB
    wahyd4
    wahyd4
    Mar 14, 2014
    54
    很fancy啊
    Sdhjt
    Sdhjt
    Mar 14, 2014
    55
    赞一个!
    freshfish
    freshfish
    Mar 14, 2014
    56
    一个图片都没有,很不错!
    Zkiller
    Zkiller
    Mar 14, 2014
    57
    Nice!
    loryyang
    loryyang
    Mar 14, 2014
    58
    非常nice!赞
    along
    along
    Mar 14, 2014
    59
    太佩服了?这是个妹子?好友耐心啊!
    hqman
    hqman
    Mar 15, 2014
    60
    国际范
    hydyy
    hydyy
    Mar 15, 2014
    61
    不错哦 你现在在哪里工作啊
    zolinbook
    zolinbook
    Mar 15, 2014
    62
    赞。
    suprod
    suprod
    Mar 16, 2014
    63
    年逼闪闪
    xx314327475
    xx314327475
    Mar 16, 2014
    64
    赞一个
    javababy
    javababy
    Mar 16, 2014
    65
    不可思议!
    imskull
    imskull
    Mar 16, 2014
    66
    css有必要练成这样吗?没必要吧?有必要吗?loop n...
    luahou
    luahou
    Mar 16, 2014
    67
    32个赞。
    dragonszy
    dragonszy
    Mar 17, 2014
    68
    仔细看了下iphone,发现clock的指针真的在动额。
    shuson
    shuson
    Mar 20, 2014
    69
    敢为楼主变弯
    dancingbear
    dancingbear
    Mar 20, 2014
    70
    这是怎么画的,有工具吗?
    double
    double
    OP
    Mar 20, 2014
    71
    @dancingbear 用CSS码的
    duteng612
    duteng612
    Mar 22, 2014
    72
    楼主真是很有GEEK精神,佩服中,码了2600+行
    aaronlam
    aaronlam
    Mar 23, 2014
    73
    佩服了!楼主,如果要做到像你这样需要学CSS之外还要学什么呢?
    6711411
    6711411
    Mar 24, 2014
    74
    给跪了.
    win2next
    win2next
    Apr 9, 2014
    75
    太牛逼了,我怎么这么烂,捶地
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5020 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 201ms · UTC 03:45 · PVG 11:45 · LAX 19:45 · JFK 22:45
    ♥ Do have faith in what you're doing.