纯CSS3模拟iPhone4解锁效果

来源:https://www.sucaihuo.com/js/2738.html 2017-08-15 22:06浏览(1282) 收藏

一款纯CSS3模拟iPhone4解锁的效果,几乎跟真的iPhone解锁的效果一样,而且还有相应的操作说明,整体效果相当的大气漂亮,适用于任何需要滑动验证的页面场景,喜欢的童鞋请收下吧。
纯CSS3模拟iPhone4解锁效果
分类:导航菜单 > 滑动导航 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2