html锁机源码,webkit实现仿Iphone解锁插件

weixin_39642622

于 2021-06-20 15:55:32 发布

阅读量651

点赞数

文章标签： html锁机源码

这篇博客分享了如何利用CSS3的webkit浏览器渐变效果创建一个仿iPhone解锁插件。通过HTML和JavaScript实现滑动解锁功能，详细讲解了关键帧动画`@-webkit-keyframes`和`-webkit-background-clip:text`等技术的应用。

摘要由CSDN通过智能技术生成

今天给大家分享一个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 <= 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);

});