jquery+css带loading加载动画的登录注册表单效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery+css带loading加载动画的登录注册表单效果代码
下面为部分代码预览,完整代码请点击下载或在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"> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300); * { font-family: 'Open Sans Condensed', sans-serif; color: #464646; transition: all 1.5s linear; overflow: hidden !important; box-sizing: border-box; } .container { width: 100%; height: 100%; } .container .bg-img { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; opacity: 0; filter: blur(5px); transform: scale(1.5); } .container .bg-img img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; } .header { position: absolute; width: 100%; height: 100%; background-color: #464646; display: table; text-align: center; color: #e2e8e7; z-index: 10; } .header h1 { display: table-cell; text-align: center; vertical-align: middle; font-size: 72px; z-index: 2; position: relative; color: #E2E8E7; } .main { position: absolute; width: 100%; height: 100%; } .main .login { position: absolute; background: #fff; height: 260px; width: 300px; bottom: -520px; left: 50%; margin-left: -150px; box-shadow: 0 0 20px 2px #464646; z-index: 2; } .main .register { position: absolute; background: #fff; height: 440px; width: 300px; bottom: -880px; left: 50%; margin-left: -150px; box-shadow: 0 0 20px 2px #464646; z-index: 2; } .form-toggle { float: right; color: #00B3A0; font-size: 14px; line-height: 24px; } .form-toggle:hover { cursor: pointer; } .footer { position: absolute; top: 100%; left: 0; right: 0; bottom: 0; background-color: #e2e8e7; } .footer .footer-nav { list-style: none; width: 100%; height: 20%; position: relative; margin: 0; padding: 0; margin-top: 100px; text-align: center; } .footer .footer-nav .link { width: 25%; float: left; border-left: 1px solid #666666; border-right: 1px solid #464646; } .footer .footer-nav .link:first-child { border-left-width: 0; } .footer .footer-nav .link:last-child { border-right-width: 0; } .disclaimer { font-size: 12px; text-align: center; width: 80%; margin: 12px auto; padding: 12px; } .container.loaded .loading { display: none; } .container.loaded .bg-img { opacity: 1; filter: blur(0); transform: scale(1); } .container.loaded .header { height: 40px; background-color: #00b3a0; box-shadow: 0 0 20px 2px #464646; } .container.loaded .header h1 { font-size: 24px; } .container.loaded .main .login { bottom: calc(25% - 50px); } .container.loaded .footer { top: 75%; } .register { transition: all .5s linear; } .container.loaded.show-register ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0