css实现滑动式登录注册表单效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现滑动式登录注册表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; } :root { --color-1: #ee7344; /* Info Container */ --color-2: #fcb900; /* Form */ --color-3: #fff; /* Button */ --color-4: #0575cc; /* Footer Link */ } body { font-family: Montserrat, sans-serif; } .wrapper { max-width: 860px; min-width: 300px; margin: 0 auto; } footer { margin-top: 20px; font-size: 14px; padding: 10px 20px; } footer a { text-decoration: none; color: var(--color-4); } section { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 80px); padding: 0 20px; } .row { display: flex; align-items: center; padding: 0 30px; width: 100%; height: 260px; background-color: var(--color-1); box-shadow: 6px 0 15px rgba(0, 0, 0, 0.4); } .col { flex: 1; } #col-1 { height: 140%; background-color: var(--color-2); box-shadow: 4px 0 10px rgba(0, 0, 0, 0.4); z-index: 10; } .form { padding: 30px; display: flex; flex-direction: column; height: 100%; gap: 30px; justify-content: center; } form { display: flex; flex-direction: column; gap: 16px; } form a { color: black; } input { background-color: var(--color-2); border: 2px solid black; border-radius: 3px; line-height: 2; padding: 4px 8px; font-weight: bold; font-size: 16px; box-shadow: 0.3rem 0.3rem #111827; } input:focus { outline: 1px solid transparent; transform: scale(1.005); } input::placeholder { color: black; font-weight: bold; } input[type="email"], input[type="password"] { width: 100%; } input[type="submit"] { background-color: var(--color-3); align-self: flex-end; cursor: pointer; transition-duration: 0.1s; border: 2px solid black; padding: 1px 21px; } input[type="submit"]:active, button:active { transform: scale(1.03); } label { position: relative; } label span { transition-duration: 0.2s; } label:focus-within span, .focus-span { transform: translate(0.25rem, -72%) scale(0.8); background-color: var(--color-2); } label span { font-weight: bold; position: absolute; left: 4px; top: 8px; padding: 4px 8px; } .info { padding: 10px 30px; display: flex; flex-direction: column; align-items: flex-end; } #sign-up { align-items: flex-start; } button { padding: 8px 42px; background-color: var(--color-3); margin-top: 15px; box-shadow: 0.3rem 0.3rem #111827; cursor: pointer; font-weight: bold; border-radius: 3px; border: 2px solid #111827; transition-duration: 0.1s; font-size: 16px; } .display-none { display: none; } .display-flex { display: flex; } .order { order: 1; } @keyframes bounceLeft { 0% { transform: translateX(-400px); } 90% { transform: translateX(10px); } 100% { transform: translateX(0); } } @keyframes bounceRight { 0% { transform: translateX(400px); } 90% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .bounce-left { animation: bounceLeft 1s forwards; } .bounce-right { animation: bounceRight 1s forwards; } .codepen-footer { font-family: "Patrick Hand", cursive; font-size: 17px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; background-color: #232323; color: white; text-align: center; height: 38px; font-size: 21px; display: flex; justify-content: space-between; padding: 6px 20px; } .codepen-footer a { color: #ee7344; text-decoration: none; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="wrapper"> <main> <section> <div class="row"> <div id="col-1" class="col"> <div id="sign-up-form" class="form"> <h1>Sign Up</h1> <form onsubmit="return false;"> <label for="email-1"> <input id="email-1" name="email-1" type="email" placeholder="" autocomplete="off"> <span id="span-email-1">Email</span> </label> <label for="password-1"> <input id="password-1" name="password-1" type="password" placeholder=""> <span id="span-password-1">Pas.........完整代码请登录后点击上方下载按钮下载查看
网友评论0