信封式注册步骤表单交互效果代码
代码语言:html
所属分类:表单美化
代码描述:信封式注册步骤表单交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> body { font-family: "Roboto"; } .dwo { background: linear-gradient(120grad, #643986, #98aed5); position: absolute; width: 100%; height: 100%; } .registration-form { width: 400px; position: absolute; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); top: 15%; background: transparent; } .registration-form header { position: relative; z-index: 4; background: white; padding: 20px 40px; border-radius: 15px 15px 0 0; } .registration-form header h1 { font-weight: 900; letter-spacing: 1.5px; color: #333; font-size: 23px; text-transform: uppercase; margin: 0; } .registration-form header p { word-spacing: 0px; color: #9facb6; font-size: 17px; margin: 0; margin-top: 5px; } .registration-form form { position: relative; } .registration-form .input-section { width: 100%; position: absolute; display: -webkit-box; display: flex; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); height: 75px; border-radius: 0 0 15px 15px; overflow: hidden; z-index: 2; box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .registration-form .input-section.folded { width: 95%; margin-top: 10px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index: 1; } .registration-form .input-section.folded input { background-color: #e9e2c0; } .registration-form .input-section.folded span { background-color: #e9e2c0; } .registration-form .input-section.folded + .folded { width: 90%; margin-top: 20px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index: 0; } .registration-form .input-section.folded + .folded input { background-color: #e1bcef; } .registration-form .input-section.folded + .folded span { background-color: #e1bcef; } .registration-form .input-section.fold-up { margin-top: -75px; } .registration-form form input { background: white; color: #8f8fd6; width: 80%; border: 0; padding: 20px 40px; margin: 0; } .registration-form form input:focus { outline: none; } .registration-form form input::-webkit-input-placeholder { color: #8f8fd6; font-weight: 100; } .registration-form form input::-moz-placeholder { color: #8f8fd6; font-weight: 100; } .registration-form form input:-ms-input-placeholder { color: #8f8fd6; font-weight: 100; } .registration-form form input::-ms-input-placeholder { color: #8f8fd6; font-weight: 100; } .registration-form form input::placeholder { color: #8f8fd6; font-weight: 100; } .animated-button { width: 20%; background-color: #d4d4ff; } .animated-button span { display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; justify-content: space-around; -webkit-box-align: center; align-items: center; line-height: 75px; text-align: center; height: 75px; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .animated-button span i { font-size: 25px; color: #9999f8; } .animated-button .next-button { background: transparent; color: #9999f8; font-weight: 100; width: 100%; border: 0; } .next { margin-top: -75px; } .success { width: 100%; position: absolute; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); height: 75px; border-radius: 0 0 15px 15px; overflow: hidden; z-index: 2; box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; background: limegreen; margin-top: -75px; } .success p { color: white; font-weight: 900; letter-spacing: 2px; font-size: 18p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0