jQuery+CSS3手机锁屏解锁

1、新建html文档。

2、书写hmtl代码。

<div id="container">

  <div class="main">

    <div class="project">

      <div class="site">

        <h1>iPhone4 on pure CSS3!</h1>

        <div class="iphone_container">

          <div class="iphone">

            <div class="iphone_light_gradient"></div>

            <div class="iphone_power_button" id="iphone_power_button"></div>

            <div class="iphone_voice_toogle"></div>

            <div class="iphone_voice_plus"></div>

            <div class="iphone_voice_minus"></div>

            <div class="iphone_camera"></div>

            <div class="iphone_dynamic"></div>

            <div class="iphone_black_bg"></div>

            <div class="iphone_display" >

              <div class="iphone_headline" id="iphone_headline">

                <div class="iphone_net"></div>

                <div class="iphone_net_title">tjrus</div>

                <div class="iphone_wi-fi">

                  <div class="hack"></div>

                </div>

                <div class="iphone_clock" id="iphone_headline_clock">00:00</div>

                <div class="iphone_lock"></div>

                <div class="iphone_battery"></div>

              </div>

              <div class="iphone_header" id="iphone_lock_header">

                <div class="iphone_time" id="iphone_lock_time">0<span>:</span>00</div>

                <div class="iphone_date" id="iphone_lock_date"></div>

              </div>

              <div class="iphone_footer" id="iphone_lock_footer">

                <div class="iphone_unlock" id="iphone_unlock">

                  <div class="iphone_slider" id="iphone_slider"></div>

                  <div class="iphone_slide2unlock" id="iphone_slide2unlock">slide to unlock</div>

                </div>

              </div>

3、书写css代码。

.name { font-size: 20px; padding-bottom: 20px; color: #ececec; }

.hint_1, .hint_2, .hint_3 { position: absolute; width: 21px; height: 21px; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; box-shadow: #999 0 0 0 1px, inset rgba(255,255,255,0.8) 0 1px 0, rgba(0,0,0,0.3) 0 1px 1px; -moz-box-shadow: #999 0 0 0 1px, inset rgba(255,255,255,0.8) 0 1px 0, rgba(0,0,0,0.3) 0 1px 1px; -webkit-box-shadow: #999 0 0 0 1px, inset rgba(255,255,255,0.8) 0 1px 0, rgba(0,0,0,0.3) 0 1px 1px; text-shadow: rgba(255,255,255,0.9) 0 1px 0; left : 0px; line-height: 22px; text-align: center; color: #999; font-size: 12px; background: linear-gradient(top, #ececec, #cecece); background: -webkit-linear-gradient(top, #ececec, #cecece); background: -moz-linear-gradient(top, #ececec, #cecece); background: -o-linear-gradient(top, #ececec, #cecece); }

.hint_1:before, .hint_2:before, .hint_3:before { content: ''; position: absolute; left: 21px; top: 10px; height: 1px; width: 20px; background: #999; box-shadow: rgba(255,255,255,0.3) 0 -1px 0; -moz-box-shadow: rgba(255,255,255,0.3) 0 -1px 0; -webkit-box-shadow: rgba(255,255,255,0.3) 0 -1px 0; }

.hint_1:after, .hint_2:after, .hint_3:after { content: ''; position: absolute; left: 40px; top: 8px; height: 5px; width: 5px; background: #888; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: rgba(255,255,255,0.7) 0 -1px 0; -moz-box-shadow: rgba(255,255,255,0.7) 0 -1px 0; -webkit-box-shadow: rgba(255,255,255,0.7) 0 -1px 0; }

.hint_1:before { width: 312px }

.hint_1:after { left: 328px }

.hint_1 { top: 90px }

.hint_2 { top: 662px }

.hint_3 { top: 770px }

footer { position: relative; bottom: 0; text-align: center; color: #464646; padding: 0 0 10px 0; }

.f_left { float: left }

.f_right { float: right }

.clear { clear: both; height: 0 !important; overflow: hidden !important; }

4、书写并添加js代码。

<script src="js/modernizr-2.js"></script>

<script src="js/jquery.min.js"></script>

<script src="js/jquery-ui-1.8.16.custom.min.js"></script>

<script src="js/iphone.js"></script>

5、代码整体结构。

6、查看效果。