div+css+js实现炫酷登录表单页面代码
代码语言:html
所属分类:表单美化
代码描述:div+css+js实现炫酷登录表单页面代码
代码标签: div css js 炫酷 登录 表单 页面 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype'); } body { all: initial; font-family: 'Roboto', sans-serif; letter-spacing: 0.02em; } * { box-sizing: border-box; } main { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #3f2766; } .form { display: flex; align-items: center; justify-content: center; position: relative; width: 400px; height: 400px; flex-shrink: 0; padding: 20px; border-radius: 5px; } .form__loader { display: flex; position: absolute; left: 0; top: 0; height: 100%; width: 100%; justify-content: center; align-items: center; z-index: -4; transition: all 0.5s ease; } .form__content { text-align: center; display: flex; justify-content: center; flex-direction: column; position: relative; opacity: 0; transform: translateY(10px); transition: all 0.5s ease 0.7s; } .form__cover { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: -4; border-radius: 7px; overflow: hidden; transition: all 0.3s ease 0.8s; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } .form__cover:after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #4d317a; z-index: -4; border-radius: 50%; transition: all 1.5s ease 0.3s; transform: scale(0); } .form__cover:before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: white; z-index: -5; border-radius: 50%; transition: all 0.5s ease; transform: scale(0); } body.on-start .form__cover:before { transform: scale(0.15); } body.document-loaded .form__loader { transform: scale(0); opacity: 0; visibility: hidden; } body.document-loaded .form__content { opacity: 1; transform: none; } body.document-loaded .form__cover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } body.document-loaded .form__cover:after { transform: scale(2); } body.document-loaded .form__cover:before { transition: transform 2s ease, opacity 0.3s ease 0.8s; transform: scale(2); opacity: 0; } h1 { font-size: 40px; color: #714cac; letter-spacing: 0.035em; margin: 20px 0; } .styled-button { -webkit-appearance: none; -webkit-user-select: none; cursor: pointer; font-size: 14px; width: 100%; padding: 20px; outline: none; background: none; position: relative; color: #372357; border-radius: 3px; margin-bottom: 25px; border: none; text-transform: uppercase; font-weight: 600; letter-spacing: 0.1em; background: #714cac; transition: all 0.3s ease; overflow: hidden; } .styled-button__real-text-holder { position: relative; } .styled-button__real-text { color: transparent; display: inline-block; } .styled-button__text-holder { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .styled-button__moving-block { transition: all 0.3s ease; position: absolute; left: 0; top: 0; height: 100%; width: 100%; overflow: hidden; } .styled-button__moving-block.back { color: white; transform: translateX(-100%); } .styled-button__moving-block.back .styled-button__text-holder { transform: translateX(100%); } .styled-button:hover, .styled-button:active { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); background: #7a51bb; } .styled-button:hover .face, .styled-button:active .face { transform: translateX(100%); } .styled-button:hover .face .styled-button__text-holder, .styled-button:active .face .styled-button__text-holder { transform: translateX(-100%); } .styled-button:hover .back, .styled-button:active .back { transform: translateX(0); } .styled-button:hover .back .styled-button__text-holder, .styled-button:active .back .styled-button__text-holder { transform: translateX(0); } .styled-button:active { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .styled-input { width: 100%; position: relative; margin-bottom: 25px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3px; transition: all 0.3s ease; } .styled-input__circle { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -2; overflow: hidden; border-radius: 3px; } .styled-input__circle:after { content: ''; position: absolute; left: 16.5px; top: 19px; height: 14px; width: 14px; z-index: -2; border-radius: 50%; background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 10px rgba(255, 255, 255, 0); transition: transform 0.5s ease, opacity 1s ease; } .styled-input__input { width: 100%; -webkit-appearance: none; font-size: 14px; outline: none; background: none; padding: 18px 15px; color: #ceafff; border: none; font-weight: 600; letter-spacing: 0.035em; } .styled-input__placeholder { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; z-index: -1; padding-left: 45px; color: white; } .styled-input__placeholder-text { perspective: 500px; display: inline-block; } .styled-input__placeholder-text .letter { display: inline-block; vertical-align: middle; position: relative; -webkit-animation: letterAnimOut 0.25s ease forwards; animation: letterAnimOut 0.25s ease forwards; text-shadow: 0 0 5px; } .styled-input__placeholder-text .letter.active { -webkit-animation: letterAnimIn 0.25s ease forwards; animation: letterAnimIn 0.25s ease forwards; } .styled-input:hover { border-color: rgba(255, 255, 255, 0.4); } .styled-input.filled { border-color: rgba(255, 255, 255, 0.2); } .styled-input.filled .styled-input__circle:after { transform: scale(33); opacity: 0; } @-webkit-keyframes letterAnimIn { 0% { transform: translate(0, 0); } 25% { transform: translate(0, 10px); color: red; } 45% { transform: translate(0, 10px); opacity: 0; color: red; } 55% { transform: translate(0, 10px); opacity: 0; } 56% { transform: translate(-30px, -27px); opacity: 0; color: #00ff6b; } 76% { color: #00ff6b; opacity: 1; transform: translate(-30px, -27px); } 100% { transform: translate(-30px, -27px); opacity: 1; } } @keyframes letterAnimIn { 0% { transform: translate(0, 0); } 25% { transform: translate(0, 10px); color: red; } 45% { transform: translate(0, 10px); opacity: 0; color: red; } 55% { transform: translate(0, 10px); opacity.........完整代码请登录后点击上方下载按钮下载查看
网友评论0