jquery+css实现全屏大气幻灯片式登录注册表单页面代码
代码语言:html
所属分类:表单美化
代码描述:jquery+css实现全屏大气幻灯片式登录注册表单页面代码
代码标签: jquery css 全屏 大气 幻灯片 式 登录 注册 表单 页面 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/slick.1.8.css"> <style> @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700'); /************ Start Main Rules **************/ *{ margin: 0; padding: 0; outline: none; box-sizing: border-box; /* font-family: 'Roboto', sans-serif; */font-family: 'Raleway', sans-serif; } body{background: #191919 } .main-box{ position: relative; display: block; width: 90%; height: 700px; margin: 50px auto; border-radius: 8px; overflow: hidden; background:linear-gradient(to right, #232f41, #374a62); } .lined-link{ position: relative; text-decoration: none; transition: all 0.2s linear } .lined-link:hover{ opacity: 0.5 } .lined-link:after { position: absolute; content: ""; width: 100%; left: 0; bottom: -2px; border: none; border-bottom: 1px solid #63d5c4; } /************ Start Slider Container **************/ .slider-cont, .form-cont{ width: 50%; height: 100%; float: left; } .slick-slide, .slick-slider{ width: 100%; height: 100% } .clear-fix{ clear: both; } .slick-dots { position: absolute; bottom: 10px; display: block; width: 100%; padding: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 3px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; display: block; width: 10px; height: 10px; padding: 5px; cursor: pointer; border: 0; outline: none; background: #8dffea; border-radius: 50%; transition: all 0.3s ease; } .slick-dots li.slick-active button{ background-color: #53C5B9; transform: scale(1.6); box-shadow: 0 0 10px #1b1b1b } .img-txt{ position: relative; } .img-layer { position: absolute; width: 100%; height: 100%; background: rgba(47, 63, 85, 0.53); } .img-txt h1{ position: absolute; display: block; top: 50%; color: #fff; width: 100%; padding: 50px 0; font-size: 45px; font-weight: 100; text-align: center; transform: translateY(-50%); background-color: transparent; } /************ Start Form Container **************/ .top-buttons { position: relative; display: block; width: 100%; height: 15%; padding: 25px; text-align: right; } .top-buttons button { color: #cacaca; border: none; width: 90px; margin: -2px; padding: 10px; font-size: 16px; font-weight: 300; background: #4c5c72; cursor: pointer; } .top-buttons button:nth-child(1) { border-radius: 50px 0 0 50px; } .top-buttons button:nth-child(2) { border-radius: 0 50px 50px 0; } .top-active-button { color: #fff !important; box-shadow: 0 0 20px #2a2a2a; background: linear-gradient(#68dac7,#54c7ba) !important; transition: all 0.3s ease; } .form{ width: 100%; height: 85%; padding: 10px 40px; } .form form { width: 100%; height: 100%; } .form form lable, input[type="text"], input[type="email"], input[type="password"] { display: block; } .form form lable { color: #fff; font-size: 16px; font-weight: 300; margin: 6px 0; } p.terms { color: #9E9E9E; margin-bottom: 60px; } .form form input[type="text"], input[type="email"], input[type="password"] { color: #fff; width: 100%; border: none; font-size: 16px; font-weight: 200; margin-bottom: 45px; padding: 5px 0 10px 0; background: transparent; border-bottom: 1px solid #4c5c72; } .form form input::placeholder{ color: #cecece; } .form form a { color: #fff; } input.form-btn { color: #fff; font-size: 18px; font-weight: 300; padding: 12px 55px; margin-right: 20px; border: none; cursor: pointer; border-radius: 35px; transition: all 0.3s linear; box-shadow: 0 0 40px rgba(0, 0, 0, 0.55); background: linear-gradient(to right, #5bcdbe,#41ab9e); } input.form-btn:hover{ box-shadow: none } .form-signin{ display: none; padding-top: 120px; } </style> </head> <body > <div class="main-box"> <div class="slider-cont"> <div class="signup-slider"> <div class="img-txt"> <div class="img-layer"></div> <h1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0