css实现滑块式登录注册表单一体化切换页面效果代码
代码语言:html
所属分类:表单美化
代码描述:css和js实现左右滑块式登录注册表单一体化切换页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url("https://fonts.googleapis.com/css?family=Open+Sans"); *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Open Sans", Helvetica, Arial, sans-serif; background:#1F1F1F; } input, button { border: none; outline: none; background: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; } .tip { font-size: 20px; margin: 40px auto 50px; text-align: center; } .cont { overflow: hidden; position: relative; width: 900px; height: 550px; margin: 0 auto 100px; background: #fff; } .form { position: relative; width: 640px; height: 100%; transition: transform 1.2s ease-in-out; padding: 50px 30px 0; } .sub-cont { overflow: hidden; position: absolute; left: 640px; top: 0; width: 900px; height: 100%; padding-left: 260px; background: #fff; transition: transform 1.2s ease-in-out; } .cont.s--signup .sub-cont { transform: translate3d(-640px, 0, 0); } button { display: block; margin: 0 auto; width: 260px; height: 36px; border-radius: 30px; color: #fff; font-size: 15px; cursor: pointer; } .img { overflow: hidden; z-index: 2; position: absolute; left: 0; top: 0; width: 260px; height: 100%; padding-top: 360px; } .img:before { content: ""; position: absolute; right: 0; top: 0; width: 900px; height: 100%; background-image: url("//repo.bfw.wiki/bfwrepo/image/5eedde0ecfa60.png"); background-size: cover; transition: transform 1.2s ease-in-out; } .img:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .cont.s--signup .img:before { transform: translate3d(640px, 0, 0); } .img__text { z-index: 2; position: absolute; left: 0; top: 50px; width: 100%; padding: 0 20px; text-align: center; color: #fff; transition: transform 1.2s ease-in-out; } .img__text h2 { margin-bottom: 10px; font-weight: normal; } .img__text p { font-size: 14px; line-height: 1.5; } .cont.s--signup .img__text.m--up { transform: translateX(520px); } .img__text.m--in { transform: translateX(-520px); } .cont.s--signup .img__text.m--in { transform: translateX(0); } .img__btn { overflow: hidden; z-index: 2; position: relative; width: 100px; height: 36px; margin: 0 auto; background: transparent; color: #fff; text-transform: uppercase; font-size: 15px; cursor: pointer; } .img__btn:after { content: ""; z-index: 2; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 30px; } .img__btn span { position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; transition: transform 1.2s; } .img__btn span.m--in { transform: translateY(-72px); } .cont.s--signup .img__btn span.m--in { transform: translateY(0); } .co.........完整代码请登录后点击上方下载按钮下载查看
网友评论0