当前位置：首页 > news >正文

一个炫酷的登录页面

news 2025/10/31 21:46:33

1、代码简介

这是一个具有炫酷特效的html登录页面

2、代码实现

<template><div class="login"><div class="container" ref="container" id="container"><div class="form-container sing-up-container"><!--注册--><form action="#" onsubmit="return false"><h1>用户注册</h1><div class="social-container"><a href="#" class="social"><span class="iconfont icon-QQ"></span></a><a href="#" class="social"><span class="iconfont icon-weixin"></span></a><a href="#" class="social"><span class="iconfont icon-weibo"></span></a></div><span>您可以选择以上几种方式注册一个账户！</span><input type="text" placeholder="用户名"><input type="password" placeholder="密码"><input type="email" placeholder="邮箱"><button type="submit" id="send-code">发送验证码</button><input type="text" placeholder="验证码"><button type="submit">注册</button></form></div><div class="form-container sing-in-container"><!--登录--><form action="#" onsubmit="return false"><h1>用户登录</h1><div class="social-container"><a href="#" class="social"><span class="iconfont icon-QQ"></span></a><a href="#" class="social"><span class="iconfont icon-weixin"></span></a><a href="#" class="social"><span class="iconfont icon-weibo"></span></a></div><span>您可以选择以上几种方式登录您的账户！</span><input type="text" placeholder="用户名"><input type="password" placeholder="密码"><a href="#">忘记密码？</a><button type="submit" @click="login">登录</button></form></div><!--侧边栏--><div class="overlay-container"><div class="overlay"><div class="overlay-panner overlay-left"><h1>已有账号？</h1><p>快快点我去进行登录吧。</p><button class="ghost" @click="signIn">登录</button></div><div class="overlay-panner overlay-right"><h1>没有账号？</h1><p>点击注册一个专属你的账号吧。</p><button class="ghost" @click="signUp">注册</button></div></div></div></div></div></template>
<style scoped>h1 {margin: 0.2rem;font-size: 1.2rem;
}p {font-size: 1rem;line-height: 1.5rem;/*字体变淡*/font-weight: 100;margin: 1.2rem 0;/*字间距*/letter-spacing: 0.1rem;
}span {font-size: 0.8rem;margin: 1.2rem 0;
}a {color: #333;font-size: 1rem;/*下划线消失*/text-decoration: none;
}.login {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;margin: 0 auto;
}.container {/*相对定位*/position: relative;background: #fff;border-radius: 10px;box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);padding: 0.6rem;width: 50rem;height: 35rem;/*溢出隐藏*/overflow: hidden;max-width: 100vw;min-height: 70vh;
}.form-container form {background-color: #fff;display: flex;flex-direction: column;padding: 0 1.8rem;height: 100%;justify-content: center;align-items: center;
}.social-container {margin: 0.6rem 0;
}.social-container a {border: 1px solid #eee;border-radius: 50%;display: inline-flex;justify-content: center;align-items: center;margin: 0 5px;height: 1.8rem;width: 1.8rem;
}.iconfont{font-size: 100%;
}.social-container a:hover {opacity: 0.8;
}.form-container input {width: 100%;height: 2.2rem;text-indent: 1rem;border-bottom: 1px solid #ccc;border-top: none;border-left: none;border-right: none;/*选中input取消边框*/outline: none;margin: 0.6rem 0;
}.form-container button:active {/*点击按钮时缩小*/transform: scale(0.95, 0.95);
}.form-container button {background: #417dff;color: white;border: 1px solid;outline: none;cursor: pointer;width: 5rem;border-radius: 8px;transition: all 100ms ease-in;margin: 0.6rem 0;font-size: 0.6rem;padding: 0.5rem 0;
}button#send-code {width: 100%;
}button.ghost {background: transparent;border: 1px solid #fff;outline: none;cursor: pointer;width: 5rem;border-radius: 8px;transition: all 800ms ease-in;margin: 0.6rem 0;padding: 0.5rem 0;color: #fff;font-size: 0.6rem;
}button.ghost:active {transform: scale(0.95, 0.95);
}.form-container {position: absolute;top: 0;height: 100%;transition: all 0.5s ease-in;
}.sing-up-container {left: 0;width: 50%;opacity: 0;z-index: 1;
}.sing-in-container {left: 0;width: 50%;z-index: 2;
}.overlay {background: #417dff;width: 200%;height: 100%;position: relative;left: -100%;transition: all 0.6s ease-in-out;color: white;
}.overlay-container {position: absolute;top: 0;right: 0;width: 50%;height: 100%;overflow: hidden;transition: all 0.6s ease-in-out;z-index: 99;}.overlay-panner {position: absolute;top: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;width: 50%;height: 100%;padding: 0 2.2rem;
}.overlay-right {right: 0;
}/*侧边栏动画*/
.container.right-panel-active .overlay-container {transform: translateX(-100%);
}/*登录动画*/
.container.right-panel-active .sing-in-container {transform: translateX(100%);
}/*注册动画*/
.container.right-panel-active .sing-up-container {transform: translateX(100%);opacity: 1;z-index: 5;
}.container.right-panel-active .overlay {transform: translateX(50%);
}.container.right-panel-active .overlay-left {transform: translateX(0);
}.container.right-panel-active .overlay-right {transform: translateX(20%);
}</style>