bootstrap大气网站登录注册表单页面代码
代码语言:html
所属分类:表单美化
代码描述:bootstrap大气网站登录注册表单页面代码,点击注册可切换到注册表单。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.4.3.1.min.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> a{ color: black; } a:hover{ text-decoration: none; color: black; } .mb-3, .my-3 { margin-bottom: 1.6rem !important; } .login-top { width: 100%; position: fixed; z-index: 999; top: 0px; } .head { width: 400px; height: 80px; margin-left: 10%; } .head img { width: 120px; margin-top: 15px; } .head span { display: block; float: right; width: 100px; height: 80px; line-height: 80px; margin-right: 43%; font-size: 1.2rem; color: rgb(135, 148, 143); } .head span h1{ display: block; padding: 0; float: left; height: 80px; line-height: 72px; padding: 0px 3px; font-size: 3rem; } .login-box { margin-top: 80px; width: 100%; height: 600px; background-color: #10c55c; } .tree { position: relative; width: 300px; top: 468px; left: 120px; } .tree img { width: 300px; height: 132px; } .slogan { position: relative; width: 500px; left: 200px; font-size: 5rem; color: white; letter-spacing: 10px; animation: slogan 1s; -webkit-animation: slogan 1s; /* Safari and Chrome */ } @keyframes slogan { 0% { left: -40%; top: 0px; opacity: 0; } 100% { left: 200px; top: 0px; opacity: 1; } } @-webkit-keyframes slogan /* Safari and Chrome */ { 0% { left: 40%; top: 0px; opacity: 0; } 100% { left: 40%; top: -280px; opacity: 1; } } .yellow { color: #fdef34; } .earth { position: relative; width: 400px; height: 350px; top: -280px; left: 40%; animation: earth 1s; -webkit-animation: earth 1s; /* Safari and Chrome */ } @keyframes earth { 0% { left: 40%; top: 0px; } 100% { left: 40%; top: -280px; } } @-webkit-keyframes earth /* Safari and Chrome */ { 0% { left: 40%; top: 0px; } 100% { left: 40%; top: -280px; } } .earth img { width: 400px; height: 350px; } .login { position: absolute; width: 400px; height: 460px; top: 140px; right: 12%; border-radius: 10px; background-color: white; box-shadow: 3px 3px 10px 2px #0b9243; animation: login 1s; -webkit-animation: login 1s; display: block; /* Safari and Chrome */ } @keyframes login { 0% { right: 0%; top: 140px; } 100% { right: 12%; top: 140px; } } @-webkit-keyframes login /* Safari and Chrome */ { 0% { right: 0%; top: 140px; } 100% { right: 12%; top: 140px; } } .login-footer { width: 100%; height: 200px; box-shadow: 0 -10px 10px -10px #888; } .login-nav { width: 50%; height: 30px; margin: 50px auto; } .login-nav .foot { margin-top: 10px; } .login-nav ul { width: 44%; height: 25px; margin: 0 auto; padding: 0px; display: block; list-style: none; } .border { width: 3px; height: 19px; float: right; margin: 3px 5px; background-color: black; } .login-nav ul li { display: block; float: left; font-size: 1rem; font-weight: 400px; line-height: 25px; } .login-logo { width: 130px; height: 60px; margin: 20px auto; } .login-logo img { } .login-other { width: 70%; height: 40px; margin: 20px auto; } .login-other div:first-child { padding-left: 12px; } .login-other div { padding: 5px 5px; float: left; } .login-other div img { height: 30px; } .login-form { width: 70%; margin: 0 auto; padding-top: 20px; } .btn-success { background-color: #10c35b; } .btn-success:hover { background-color: #0da74d; } .hr { width: 70%; height: 1px; margin: 0 auto; background-color: #888; } .hr span { display: block; position: absolute; top: 146px; left: 45%; background-color: white; width: 30px; height: 20px; text-align: center; color: #888; } .login-regist { width: 70%; margin: 30px auto; text-align: right; font-size: 0.9rem; color: #888; } .login-regist span { color: #10c55c; font-size: 1rem; cursor: pointer; } .move { position: relative; width: 400px; height: 350px; top: -280px; left: 40%; animation-name: move; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; /* Safari and Chrome: */ -webkit-animation-name: move; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; } @keyframes move { 0% { left: 40%; top: -280px; } 100% { left: 40%; top: -270px; } } @-webkit-keyframes move /* Safari and Chrome */ { 0% { left: 40%; top: -280px; } 100% { left: 40%; top: -270px; } } /* 注册 */ .input-group-text{ cursor: pointer; } .regist { position: absolute; width: 400px; height: 460px; top: 140px; right: 12%; border-radius: 10px; background-color: white; box-shadow: 3px 3px 10px 2px #0b9243; animation: regist 1s; -webkit-animation: login 1s; display: none; /* Safari and Chrome */ } .regist-title{ width: 100%; height: 40px; font-size: 1.5rem; padding-left: 10px; margin-top: 30px; line-height: 40px; font-weight: 400; border-left: 5px solid #0b9243; } .regist-title span{ float: right; margin-right: 15%; } @keyframes regist { 0% { right: 0%; top: 140px; } 100% { right: 12%; top: 140px; } } @-webkit-keyframes regist /* Safari and Chrome */ { 0% { right: 0%; top: 140px; } 100% { right: 12%; top: 140px; } } .login-login { position: absolute; bottom: 30px; right: 15%; width: 70%; text-align: right; font-size: 0.9rem; color: #888; } #ToLogin { color: #10c55c; font-size: 1rem; cursor: pointer; } #otherLogin{ float: left; cursor: pointer; } #phoneLogin{ float: left; cursor: pointer; display: none; } .regist-form { width: 70%; margin: 0 auto; padding-top: 20px; display: block; } .phone-form { width: 70%; margin: 20px auto; padding-top: 20px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0