css+div实现简洁登录注册表单切换效果代码
代码语言:html
所属分类:表单美化
代码描述:css+div实现简洁登录注册表单切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Raleway:700,800); html, body { margin: 0; } :focus { outline: none; } ::-webkit-input-placeholder { color: #DEDFDF; } ::-moz-placeholder { color: #DEDFDF; } :-moz-placeholder { color: #DEDFDF; } ::-ms-input-placeholder { color: #DEDFDF; } body { background: #6ED0F6; color: #fff; font-family: 'Raleway', sans-serif; -webkit-font-smoothing: antialiased; } #wrapper, label, #arrow, button span { transition: all .5s cubic-bezier(.6,0,.4,1); } #wrapper { overflow: hidden; } #signin:checked ~ #wrapper { height: 178px; } #signin:checked ~ #wrapper #arrow { left: 32px; } #signin:checked ~ button span { transform: translate3d(0,-72px,0); } #signup:checked ~ #wrapper { height: 262px; } #signup:checked ~ #wrapper #arrow { left: 137px; } #signup:checked ~ button span { transform: translate3d(0,-144px,0); } #reset:checked ~ #wrapper { height: 94px; } #reset:checked ~ #wrapper #arrow { left: 404px; } #reset:checked ~ button span { transform: translate3d(0,0,0); } form { width: 450px; height: 370px; margin: -185px -225px; position: absolute; left: 50%; top: 50%; } input[type=radio] { display: none; } label { cursor: pointer; display: inline-block; font-size: 22px; font-weight: 800; opacity: .5; margin-bottom: 30px; text-transform: uppercase; } label:hover { transition: all .3s cubic-bezier(.6,0,.4,1); opacity: 1; } label[for="signin"] { margin-right: 20px; } label[for="reset"] { float: right; } input[type=radio]:checked + label { opacity: 1; } input[type=text], input[type=password] { background: #fff; border: none; border-radius: 8px; font-size: 27px; font-family: 'Raleway', sans-serif; height: 72px; width: 99.5%; margin-bottom: 10px; opacity: 1; text-indent: 20px; transition: all .2s ease-in-out; } button .........完整代码请登录后点击上方下载按钮下载查看
网友评论0