[CSS3技术]CSS3实现仿Iphone解锁插件

[tr][td]

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






HTML





slide to unlock




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  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);
 
});


[/td][/tr]