js实现一个分步骤一步一步注册登录表单效果代码
代码语言:html
所属分类:表单美化
代码描述:js实现一个分步骤一步一步注册登录表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> body { background: #33cc33; font-family: sans-serif; } body fieldset { box-shadow: 0 8px 10px #29a329; } body.error { background: #f04000; } body.error fieldset { box-shadow: 0 8px 10px #bd3200; } h1, h2 { position: absolute; left: 50%; transform: translateX(-50%); font-family: sans-serif; text-transform: uppercase; letter-spacing: 2px; } h1 { top: 24px; color: white; font-size: 12px; } h2 { top: 44px; color: white; font-size: 10px; opacity: 0.7; } ul.items { position: absolute; width: 30px; height: auto; top: 50%; left: -60px; transform: translateY(-50%); } ul.items li { width: 8px; height: 8px; margin: 10px 0; background: white; border-radius: 50%; opacity: 0.4; cursor: pointer; } ul.items li.active { opacity: 1; } form { position: absolute; width: 300px; height: 60px; top: 50%; left: 50%; transform: translate(-50%, -50%); } form fieldset { position: absolute; width: 300px; height: 60px; background: white; border-radius: 3px; opacity: 0; transform: scale(0.2); transition: all 0.4s ease-in-out; } form fieldset input, form fieldset p { display: inline-block; width: 200px; margin-left: 50px; color: #333333; font-size: 16px; letter-spacing: 1px; } form fieldset p { margin-top: 22px; text-align: center; } form fieldset input { height: 40px; margin-top: 8px; border: none; outline: none; } form fieldset .icon { position: absolute; width: 30px; height: 30px; top: 15px; transition: all 0.4s ease; } form fieldset .icon i { position: absolute; display: block; } form fieldset .icon i::before, form fieldset .icon i::after { position: absolute; content: ""; } form fieldset .icon.left { left: 10px; } form fieldset .icon.right { right: 10px; cursor: pointer; } form fieldset .icon.button:hover { background: #f2f2f2; border-radius: 3px; transition: all 0.4s ease; } form fieldset.enable { z-index: 1; opacity: 1; transition: all 0.5s ease-out 0.2s; transform: scale(1); animation: enable 0.5s ease-out 0.2s; } form fieldset.disable { opacity: 0; transition: all 0.3s ease-in; transform: translateY(120px) scale(0.9); } body.error fieldset { transform-origin: 50% 100%; animation: error 0.3s ease-out; } @keyframes enable { 0% { opacity: 0; transform: scale(0.2); } 60% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes error { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } } /** * Icons in CSS, long as f**** */ .icon .arrow { width: 2px; height: 17px; top: 5px; left: 14px; background: #333333; } .icon .arrow::before { width: 6px; height: 6px; bottom: -1px; left: -3px; border-color: #333333; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); } .icon .user { width: 20px; height: 10px; bottom: 5px; left: 5px; box-shadow: 0 0 0 2px #333333 inset; border-radius: 6px 6px 3px 3px; } .icon .user::before { width: 10px; height: 10px; top: -9px; left: 5px; box-shadow: 0 0 0 2px #333333 inset; border-radius: 50%; } .icon .letter { width: 20px; height: 12px; top: 9px; left: 5px; box-shadow: 0 0 0 2px #333333 inset; border-radius: 3px; } .icon .letter::before, .icon .letter::after { width: 11px; height: 2px; top: 4px; background: #333333; } .icon .letter::before { left: 0; transform: rotate(30deg); } .icon .letter::after { right: 0; transform: rotate(-30deg); } .icon .lock { width: 20px; height: 16px; top: 9px; left: 5px; box-shadow: 0 0 0 2px #333333 inset; border-radius: 3px; } .icon .lock::before { width: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0