jquery滑动式全屏登录注册表单页面代码
代码语言:html
所属分类:表单美化
代码描述:jquery滑动式全屏登录注册表单页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'> <style> body { height: 100%; overflow: hidden; width: 100% !important; box-sizing: border-box; font-family: 'Roboto', sans-serif; } .backRight { position: absolute; right: 0; width: 50%; height: 100%; background: #3498db url(//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png); background-size: cover; background-position: 50% 50%; } .backLeft { position: absolute; left: 0; width: 50%; height: 100%; background: #e74c3c url(//repo.bfw.wiki/bfwrepo/image/6129691c738e4.png); background-size: cover; background-position: 50% 50%; } #back { width: 100%; height: 100%; position: absolute; z-index: -999; } #slideBox { width: 50%; max-height: 100%; height: 100%; overflow: hidden; margin-left: 50%; position: absolute; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .topLayer { width: 200%; height: 100%; position: relative; left: 0; left: -100%; } .left { width: 50%; height: 100%; background: #2C3034; left: 0; position: absolute; } .right { width: 50%; height: 100%; background: #f9f9f9; right: 0; position: absolute; } .content { width: 250px; margin: 0 auto; top: 30%; position: absolute; left: 50%; margin-left: -125px; } .content h2 { color: #03A9F4; font-weight: 300; font-size: 35px; } button { background: #03A9F4; padding: 10px 16px; width: auto; font-weight: 600; text-transform: uppercase; font-size: 14px; color: #fff; line-height: 16px; letter-spacing: 0.5px; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1); border: 0; outline: 0; margin: 15px 15px 15px 0; transition: all 0.25s; } button:hover { background: #0288D1; box-shadow: 0 4px 7px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1); } .off { background: none; color: #03A9F4; box-shadow: none; } .right .off:hover { background: #eee; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0