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解锁插件】相关文章
2. Telefónica与Mozilla开拓基于HTML5互联网设备
3. HTML5+jQuery实现支持桌面和移动拖动iPhone风格插件
4. HTML5+jQuery实现支持桌面和移动拖动iPhone风格插件
6. phonegap教程第9讲 Jquery Mobile 面板(panel)
7. Adobe解释放弃移动Flash原因,无法与HTML5竞争
10. Jquery Mobile html5 phonegap中 js 跨域请求数据 实现增删查
本文来源:https://www.51html5.com/a965.html
上一篇:CSS3+jQuery日历事件插件
下一篇:CSS中的ul与li样式用法详解
﹝CSS3实现仿Iphone解锁插件﹞相关内容
- phonegap教程第7讲 Jquery Mobile插件(上)
- phonegap教程第7讲 Jquery Mobile插件(下)
- 统称Photoshop CC,Adobe将停止更新CS版本
- jQuery/CSS3实现超酷的动画Tab菜单
- CSS3实现圆角效果
- Cufon, jQuery和CSS3实现的超强飞出菜单
- CSS3实现水平垂直居中
- CSS3实现超酷的图像动画变换特效
- 用纯CSS3实现图片幻灯片切换效果
- Jquery+CSS3实现一款简洁大气带滑动效果的弹出层