iPhone4 on pure CSS3!

tjrus
00:00
0:00
Message
Calendar
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
Clock
Notes
Reminders
Mail






































App Store






Videos

YouTube
Calculator






































iTunes
















Stocks
Voice Memos


















23o
Weather
馃摓
Phone











a
b
c
d
e
f
Contacts
Camera
Music
1
2
3


Description:

This iPhone4 and it's icons was rendered in nothing but CSS3.

No images, no base64, no SVG, no canvas just 3395 lines of CSS code, 335 lines of JavaScrip code (with jQuery of course).

Viewed best in latest Safari or Chrome in MacOS.

iPhone controls:

To control this iPhone you can use it's own buttons ("power button" and "home button") and slider (on the "lock screen"):

  1. Turn on/off;
  2. Slide to unlock (on the lock screen);
  3. Turn on the iPhone if it's turned off;

下载代码说明
X关闭

CSS3模拟iPhone4界面 滑动解锁代码下载

纯CSS3模拟iPhone4界面及滑动解锁,没有过多的使用图片,能做出这种效果的确不错了,使用了最新的jquery插件,另外还自定义了所用到的JS封装类,其实并不是纯CSS3,这里最重要的是让大家慢慢去熟悉CSS3的强大功能。请用谷歌浏览器查看,谷歌浏览器下载地址:https://nowjava.com