js实现手机端向右滑动验证效果代码
代码语言:html
所属分类:拖放
代码描述:js实现手机端向右滑动验证效果代码,请在手机端预览查看
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="utf-8"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> .stage { position: relative; padding: 0 15px; height: 55px; } .slider { position: absolute; height: 52px; box-shadow: 0 0 3px #999; background-color: #ddd; left: 15px; right: 15px; } .label { background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: slidetounlock 3s infinite; -webkit-text-size-adjust: none; line-height: 52px; height: 52px; text-align: center; font-size: 16px; width: 100%; color: #aaa; } @keyframes slidetounlock { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } @-webkit-keyframes slidetounlock { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } .button { position: absolute; left: 0; top: 0; width: 52px; height: 52px; background-color: #fff; transition: left 0s; -webkit-transition: left 0s; } .button-on { position: absolute; left: 0; top: 0; width: 52px; height: 52px; background-color: #fff; transition: left 1s; -webkit-transition: left .5s; } .track { position: absolute; left: 0; top: 0; height: 100%; width: 0; overflow: hidden; transition: width 0s; -webkit-transition: width 0s; } .track-on { position: absolute; left: 0; top: 0; height: 100%; width: 0; overflow: hidden; transition: width 1s; -webkit-transition: width .5s; } .icon { width: 32px; height: 32px; position: relative; top: 10px; left: 20px; font-family: sans-serif; } .icon:before { content: '>>'; color: #ccc; line-height: 32px; } .spinner { width: 32px; height: 32px; background: url('ok.png') no-repeat; position: relative; top: 10px; left: 10px; display: none; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0