一款纯CSS3模拟iPhone4解锁的效果,几乎跟真的iPhone解锁的效果一样,而且还有相应的操作说明,整体效果相当的大气漂亮,适用于任何需要滑动验证的页面场景,喜欢的童鞋请收下吧。
页面的head部分,需引入必要的两个样式文件、jQuery库和3个JS文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/iphone.css" />
<link type="text/css" rel="stylesheet" href="css/page.css" />
<script src="js/modernizr-2.js"></script>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/iphone.js"></script>
页面的body部分,由于需要模拟的图标较多,所以代码相对多了些,这里仅贴出部分代码:
<div class="hint_1">1</div>
<div class="hint_2">2</div>
<div class="hint_3">3</div>
<div class="right_container"> <br />
<br />
<div class="share">
<div class="name">分享:</div>
<p>分享这个的两点理由:</p>
<ol>
<li>效果真的很棒!</li>
<li>样式都是CSS3,无多余图片。</li>
</ol>
<br />
<br class="clear" />
</div>
<div class="description">
<div class="name">说明:</div>
<p>iPhone4及图标都是CSS3渲染而来;</p>
<p>没有图片、base64、SVG和canvas,只有3395行的CSS代码、335行的JavaScrip代码(jQuery必不可少);</p>
<p>Safari或Chrome浏览器查看,效果更佳!</p>
</div>
<div class="controls">
<div class="name">iPhone操作:</div>
<p>按下“电源键”和“home键”并且滑动来解锁:</p>
<ol>
<li>打开或关闭;</li>
<li>锁屏时“滑动来解锁”;</li>
<li>iPhone关机时请打开。</li>
</ol>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791