纯CSS3模拟iPhone4锁屏界面

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：admin 阅读 385 次

今天本来是打算完善一下DOM树操作的，可是居然开了一整天的会，只能改做CSS了。接着上次的CSS3继续，做了个iPhone4的效果，没有图片，虽然知道是多此一举，也就纯属蛋疼。还是惯例，测试依旧是c

今天本来是打算完善一下DOM树操作的，可是居然开了一整天的会，只能改做CSS了。

接着上次的CSS3继续，做了个iPhone4的效果，没有图片，虽然知道是多此一举，也就纯属蛋疼。

还是惯例，测试依旧是chrome15，demo中的前缀只有-webkit，因此只对webkit的内核浏览器有效，

如果要换做firefox，不仅前缀要改成-moz，CSS渐变也要换成FF的语法。因为个人相对来说对webkit的语法了解，所以也就没有做FF的兼容。

演示地址:

http://fronter.sinaapp.com/wp-content/demo/iphone4.html

原版的图片，没有iPHONE,上网找的一张图片。

做出来的效果：

个人水平有限，就只能做到这一步了，再细化也没那么多时间。

具体的demo代码：

View Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <style type="text/css">
        body{ font-family: 'Tahoma';}
        p{ margin: 0;}
        #i_frame{
            width: 253px; height: 490px; margin-left: 50px; border: 2px solid #bebebe; border-radius: 30px; background: #000;
            box-shadow: 0 0 5px #000;
        }
        #top_panel{ height: 80px; display: -webkit-box; -webkit-box-align:center; -webkit-box-pack:center;}
        #screen{
            position: relative; width: 217px; height: 328px; margin: 0 auto;
            box-shadow: -1px -3px 10px #000 inset;
            background:
            -webkit-gradient(radial, 0 0, 0, 0 0, 200, from(#00c9ff), to(rgba(0, 201, 255, 0)), color-stop(70%, #00b5e2)),
            -webkit-gradient(radial, 197 328, 0, 197 328, 270, from(#00c9ff), to(#da7bb5), color-stop(50%, #00b5e2));
        }

        #camera{ display: inline-block; width: 4px; height: 4px; border: 2px solid #2f393a; border-radius: 3px;}
        #receiver{ display: inline-block; width: 44px; height: 4px; border: 2px solid #2f393a; border-radius: 4px; background: #444444;}
        #info{color: #fff; font-size: 12px;}
        #s{ margin-left: 3px;}
        #s span{ display: inline-block; border-left:3px solid #fff; margin-right: 1px ;}
        #s_1{ height: 3px;}
        #s_2{ height: 6px;}
        #s_3{ height: 9px;}

        #battery{position: absolute; top:4px; right: 2px; width: 19px; height: 8px; }
        #battery span{  float: left; }
        #battery .l{ width: 15px; height: 6px; border: 1px solid #fff;}
        #battery .r{ width: 1px; height: 3px; margin-top: 2px; border: 1px solid #fff; border-left: 0;}
        #time{
            box-sizing:border-box;  height: 67px; padding-top: 8px; background: #481244; opacity: 0.6; text-align: center; color: #fff; font-size: 14px;
            background: -webkit-gradient(linear, left top, left bottom , from(#000), to(#795869),color-stop(50%, #816073));
        }
        #time em{ display: block; font:normal 36px/1 '\5FAE\8F6F\96C5\9ED1';}
        #lock{
            position: absolute; bottom: 0; box-sizing:border-box; width: 100%; height: 67px; padding: 0 17px; background: #4c2d3d;
            background: -webkit-gradient(linear, left top, left bottom , from(#947f90), to(#5f3251),color-stop(50%, #d8bacf));
            opacity: 0.9;
        }
        #slide{
            position: relative;
            height: 34px; line-height: 34px;
            margin-top: 15px;
            border-color: #fff;
            border-style: solid;
            border-width: 0 1px 1px 1px;
            border-radius: 6px;
            box-shadow: -1px 1px 10px #000 inset;
            font-size:18px;
            color: #fff;
            text-indent: 3em;
            letter-spacing:-1px;
            overflow: hidden;
        }
        #word_layer{
            z-index: 9;
            position: absolute;

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。