jQuery+CSS3手机锁屏解锁

来源：互联网 2023-03-16 23:55:15 版权归原作者所有，如有侵权，请联系我们

jQuery CSS3手机锁屏解锁

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

jQuery CSS3手机锁屏解锁

书写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">0span>:/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>

jQuery CSS3手机锁屏解锁

书写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; }

jQuery CSS3手机锁屏解锁