CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3实现仿Iphone解锁插件

CSS3实现仿Iphone解锁插件


      今天给大家分享一个CSS3实现仿Iphone解锁插件,里面讲解了使用webkit浏览器CSS渐变的效果实现。

在线演示
HTML
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script><script src='js/slidetounlock.js'></script><h2><img src="images/arrow.png" alt="slider" /> slide to unlock</h2>
CSS
#well {   width: 720px;} h2 {   width: 200%;  -webkit-animation: slidetounlock 5s infinite;} @-webkit-keyframes slidetounlock {  0% {    background-position: -720px 0;  }  100%{    background-position: 720px 0;  }}#well {  padding: 14px 20px 20px 20px;  -webkit-border-radius: 30px;  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));  border: 2px solid #454545;  overflow: hidden;} h2 {  font-size: 80px;  background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  -webkit-animation: slidetounlock 5s infinite;  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;  font-weight: 300;  padding: 0;  width: 200%;} @-webkit-keyframes slidetounlock {  0% {    background-position: -720px 0;  }  100% {    background-position: 720px 0;  }}
Js
$(function() {     $("#slider").draggable({        axis: 'x',        containment: 'parent',        drag: function(event, ui) {            if (ui.position.left > 550) {                $("#well").fadeOut();            } else {                // Apparently Safari isn't allowing partial opacity on text with background clip? Not sure.                // $("h2 span").css("opacity", 100 - (ui.position.left / 5))            }        },        stop: function(event, ui) {            if (ui.position.left < 551) {                $(this).animate({                    left: 0                })            }        }    });     // The following credit: http://www.evanblack.com/blog/touch-slide-to-unlock/     $('#slider')[0].addEventListener('touchmove', function(event) {        event.preventDefault();        var el = event.target;        var touch = event.touches[0];        curX = touch.pageX - this.offsetLeft - 73;        if(curX <= 0) return;        if(curX > 550){            $('#well').fadeOut();        }        el.style.webkitTransform = 'translateX(' + curX + 'px)';    }, false);     $('#slider')[0].addEventListener('touchend', function(event) {        this.style.webkitTransition = '-webkit-transform 0.3s ease-in';        this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false );        this.style.webkitTransform = 'translateX(0px)';    }, false); });

【CSS3实现仿Iphone解锁插件】相关文章

1. CSS3实现仿Iphone解锁插件

2. Telefónica与Mozilla开拓基于HTML5互联网设备

3. HTML5+jQuery实现支持桌面和移动拖动iPhone风格插件

4. HTML5+jQuery实现支持桌面和移动拖动iPhone风格插件

5. iPhone 4借助HTML5和CSS3渲染网页

6. phonegap教程第9讲 Jquery Mobile 面板(panel)

7. Adobe解释放弃移动Flash原因,无法与HTML5竞争

8. 用IE9玩HTML5割绳子电脑版免费解锁神秘关卡

9. jQuery/CSS3实现拼图效果的相册插件

10. Jquery Mobile html5 phonegap中 js 跨域请求数据 实现增删查

本文来源:https://www.51html5.com/a965.html

点击展开全部

﹝CSS3实现仿Iphone解锁插件﹞相关内容

「CSS3实现仿Iphone解锁插件」相关专题

其它栏目

也许您还喜欢