还是国外的蛋疼达人，不知花了多少个日夜画出了这部iphone4，我相信作者一定是个很细心的人，不然这么多的细节如果让一个浮躁的人来处理估计世界末日也难看到。
作者为什么要分享这部iphone4呢
有两个原因让我想分享这部iphone4:
1.它很酷并且棒极了！！！
2.完全使用CSS3来完成，没有任何图片哦
效果大概就是这样，关于这部iphone4作者有话要说
这部iphone4和它的图标仅仅是由css3展现的；
没有 images, 没有 base64, 没有 SVG, 没有 canvas仅仅使用了3395行css代码和335行js代码（使用了jquery）；
在最新的safari和chrome中展现最佳，最好是MacOS。
下面是demo地址
/*风真TM重*/
相关日志-小站地图为你展开
<![CDATA[
<ol>
<li class="comment even thread-even depth-1" id="li-comment-4741">
<div id="comment-4741">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/e41d06048fe9d04f0811c966842abcd6.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://wange.im/' rel='external nofollow' class='url'>万戈</a></cite>
<span class="comment-meta commentmetadata">在64 天之前</span>
</div>
<div class="comment-text clearfix">
<p>我瞬间震精了</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/draw-a-iphone-with-css3?replytocom=4741#respond' onclick='return addComment.moveForm("comment-4741", "4741", "respond", "2624")'>回复</a> </div>
</div>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-4775">
<div id="comment-4775">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/039f1f8556b02dd133ec6974036727db.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.laozhuhome.com' rel='external nofollow' class='url'>N</a></cite>
<span class="comment-meta commentmetadata">在43 天之前</span>
</div>
<div class="comment-text clearfix">
<p>@万戈, 我当时也震精了，这哥们绝对是蛋疼了</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/draw-a-iphone-with-css3?replytocom=4775#respond' onclick='return addComment.moveForm("comment-4775", "4775", "respond", "2624")'>回复</a> </div>
</div>
</li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-4742">
<div id="comment-4742">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/99a20b0f2689bd7baf9e0d16d201814e.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://zhaoweitian.com/' rel='external nofollow' class='url'>Veezy</a></cite>
<span class="comment-meta commentmetadata">在64 天之前</span>
</div>
<div class="comment-text clearfix">
<p>第一次点开的时候吓傻了～惊艳</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/draw-a-iphone-with-css3?replytocom=4742#respond' onclick='return addComment.moveForm("comment-4742", "4742", "respond", "2624")'>回复</a> </div>
</div>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-4776">
<div id="comment-4776">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/039f1f8556b02dd133ec6974036727db.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.laozhuhome.com' rel='external nofollow' class='url'>N</a></cite>
<span class="comment-meta commentmetadata">在43 天之前</span>
</div>
<div class="comment-text clearfix">
<p>@Veezy，恩，竟然连小图标里面的小细节也是css写的，真是不容易</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/draw-a-iphone-with-css3?replytocom=4776#respond' onclick='return addComment.moveForm("comment-4776", "4776", "respond", "2624")'>回复</a> </div>
</div>
</li>
</ul>
</li>
<li class="comment even thread-even depth-1" id="li-comment-4745">
<div id="comment-4745">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/2709c466fe05e9e0fb38f8c56b129da1.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://zimoo.tk' rel='external nofollow' class='url'>leelond</a></cite>
<span class="comment-meta commentmetadata">在62 天之前</span>
</div>
<div class="comment-text clearfix">
<p>佩服之极啊！ <img src='http://www.laozhuhome.com/wp-includes/images/smilies/m906.png' alt='（额）' class='wp-smiley' /> </p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/draw-a-iphone-with-css3?replytocom=4745#respond' onclick='return addComment.moveForm("comment-4745", "4745", "respond", "2624")'>回复</a> </div>
</div>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-4777">
<div id="comment-4777">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/039f1f8556b02dd133ec6974036727db.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.laozhuhome.com' rel='external nofollow' class='url'>N</a></cite>
<span class="comment-meta commentmetadata">在43 天之前</span>
</div>
<div class="comment-text clearfix">
<p>@leelond，牛人还是很多滴</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/draw-a-iphone-with-css3?replytocom=4777#respond' onclick='return addComment.moveForm("comment-4777", "4777", "respond", "2624")'>回复</a> </div>
</div>
</li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-4757">
<div id="comment-4757">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/38d448102462b1b1fea81b5a254f2716.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.xj123.info' rel='external nofollow' class='url'>老谢</a></cite>
<span class="comment-meta commentmetadata">在57 天之前</span>
</div>
<div class="comment-text clearfix">
<p>被吓到，太厉害了</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/draw-a-iphone-with-css3?replytocom=4757#respond' onclick='return addComment.moveForm("comment-4757", "4757", "respond", "2624")'>回复</a> </div>
</div>
</li>
<li class="comment odd alt thread-even depth-1" id="li-comment-4763">
<div id="comment-4763">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/5c73a3b6e3d5f97edea783410ab3e82a.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.sub-273.com' rel='external nofollow' class='url'>ADD~``</a></cite>
<span class="comment-meta commentmetadata">在50 天之前</span>
</div>
<div class="comment-text clearfix">
<p>跟神. 如何交流呢- -.</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/draw-a-iphone-with-css3?replytocom=4763#respond' onclick='return addComment.moveForm("comment-4763", "4763", "respond", "2624")'>回复</a> </div>
</div>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-4778">
<div id="comment-4778">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/039f1f8556b02dd133ec6974036727db.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.laozhuhome.com' rel='external nofollow' class='url'>N</a></cite>
<span class="comment-meta commentmetadata">在43 天之前</span>
</div>
<div class="comment-text clearfix">
<p>@ADD~“，看看就行鸟~~</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/draw-a-iphone-with-css3?replytocom=4778#respond' onclick='return addComment.moveForm("comment-4778", "4778", "respond", "2624")'>回复</a> </div>
</div>
</li>
</ul>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-4793">
<div id="comment-4793">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/70bec75394c6154665a816268e2ee409.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.sprityaoyao.org' rel='external nofollow' class='url'>sprityaoyao</a></cite>
<span class="comment-meta commentmetadata">在36 天之前</span>
</div>
<div class="comment-text clearfix">
<p>“仅仅”二字？！</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/draw-a-iphone-with-css3?replytocom=4793#respond' onclick='return addComment.moveForm("comment-4793", "4793", "respond", "2624")'>回复</a> </div>
</div>
</li>
</ol>
]]>
快来吐槽吧
