信封式注册步骤表单交互效果代码
代码语言: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; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0