js实现带滑块拖动验证的登录框登录页效果代码
代码语言:html
所属分类:布局界面
代码描述:js实现带滑块拖动验证的登录框登录页效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @charset "utf8"; *{ margin: 0; padding: 0; box-sizing: border-box; } a{ text-decoration: none; } li{ list-style: none; } img{ border: none; } html,body{ background-color: #F4F4F4; font-family: "微软雅黑"; font-size: 14px; color: #69696d; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; } /*======= 表单 =======*/ .login-box{ position: absolute; z-index: 9; width: 435px; top: 50%; left: 50%; margin-top: -200px; margin-left: -205px; padding-top: 45px; border: 1px solid #666; background: #373737; border-radius: 2px; box-shadow: 10px 10px 5px #000; color: #fff; } .login-box form{ position: relative; } .form-inline{ position: relative; display: block; } .form-inline + .form-inline{ margin-top: 10px; } .form-inline > div{ height: 40px; line-height: 40px; } .form-inline-font{ position: absolute; left: 0; width: 110px; padding-right: 10px; font-family: "Arial"; font-size: 15px; text-align: right; } .form-inline-input{ padding-left: 110px; } .form-inline-input input, .code-box{ padding: 0 10px; width: 300px; height: 40px; color: #fff; text-shadow: 1px 1px 1px black; background: rgba(0, 0, 0, 0.16); border: 0; border-radius: 5px; outline: none; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06); } .code-box{ position: relative; } .code-box p, .code-box span{ display:block; position: absolute; left: 0; height: 40px; text-align: center; line-height: 40px; border-radius: 5px; } .code-box span{ width: 40px; background-color:#fff; font-family: "宋体"; font-size: 16px; cursor: pointer; } .code-box p{ width: 0; background-color: #FFFF99; overflow: hidden; text-indent: -20px; transition: background 1s ease-in; } .code-box .code-input{ display: none; } .login-btn{ padding-right: 25px; padding-top: 15px; padding-bottom: 10px; text-align: right; font-size: 0; } .user-btn-link{ display: inline-block; vertical-align: sub; padding-right: 10px; } .user-btn-link a{ color: #fff; font-size: 13px; } .user-btn-link a + a{ margin-left: 5px; } .user-btn-link a:hover{ text-decoration: underline; } .login-btn button{ border: none; padding: 8px 12px; background-color:#00a1d2; border-radius: 3px; font-size: 14px; color:#fff; cursor: pointer; } .login-btn button:hover{ box-shadow: 0 0 3px #00a1d2; text-shadow: 0 0 1px #b3d6dc,0 0 2px #e6e9de; } </style> <title>login</title> </head> <body> <div class="user-body-bg"></div> <div class="user-login-bg"></div> <div class="user-bottom-bg"></div> <div class="login-box"> <form action="" method="get"> <label class="form-inline"> <div class="form-inline-font"> 用户名 : </div> <div class="form-inline-input"> <input type="text" name="" value="admin" maxlength="8"/> </div> </label> <label class="form-inline"> <div class="form-inline-font"> 密码 : </div> <div class="form-inline-input"> <input type="password" name="" maxlength="16" /> </div> </label> <label class="form-inline"> <div class="form-inline-font"> 验证 : </div> <div class="form-inline-input"> <div clas.........完整代码请登录后点击上方下载按钮下载查看
网友评论0