这段 HTML 和 CSS 代码创建了一个具有翻转卡片效果的登录和注册页面。下面是对重点标签和 CSS 样式的解释和总结：
一键复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端Hardy</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto|Raleway:700');
:root {
--default-font: 'Roboto';
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: var(--default-font);
background: #444;
}
header {
width: 100vw;
height: 5vh;
}
.box {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
a {
text-decoration: none;
color: #222;
transition: color 200ms ease-out;
}
.container {
width: 640px;
height: 480px;
margin: auto;
display: flex;
}
.panel,
.face,
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.face,
.panel {
height: 100%;
width: 100%;
border-radius: 8px;
}
.card {
position: relative;
width: 50%;
height: 100%;
transition: transform 500ms ease-in-out;
transform-style: preserve-3d;
}
.card.flip {
transform: rotateY(180deg);
}
.face {
position: absolute;
background: #EEE;
text-align: center;
backface-visibility: hidden;
}
.card-back {
transform: rotatey(180deg);
}
.panel {
color: whitesmoke;
background: #222;
letter-spacing: 0.03em;
}
.panelspan {
margin: 5px 25px;
font-size: 15px;
}
.panelbtn {
margin-top: 20px;
background: #222;
border: 1px solid whitesmoke;
}
.formspan {
font-size: 14px;
margin: 5px;
}
.forgot {
margin: 8px;
}
.formbtn {
color: #222;
}
#forgotpassword {
font-size: 15px;
margin: 8px;
}
input {
display: block;
margin: 6px;
padding: 8px 10px;
width: 110%;
background: #DDD;
border: 1.5px solid #DDD;
border-radius: 6px;
transition: border 250ms ease-out;
}
input:hover,
input:focus {
outline: none;
border: 1.5px solid black;
}
::placeholder {
letter-spacing: 0.02em;
color: rgba(70, 70, 70, 1);
}
button {
cursor: pointer;
width: 140px;
padding: 10px;
margin: 5px;
color: whitesmoke;
background: #DDD;
border: none;
border-radius: 25px;
font-family: 'Raleway';
letter-spacing: 0.02em;
text-transform: uppercase;
transition: color 200ms ease-out, background 200ms ease-out;
}
button:hover,
button:focus {
outline: none;
}
button:hover,
button:active {
background: #222;
color: whitesmoke;
}
h2 {
font-family: 'Montserrat';
font-weight: bold;
font-size: 1.7em;
}
.social-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.social-container a {
width: 25px;
height: 25px;
margin: 5px;
padding: 10px;
color: #222;
background: #DDD;
border-radius: 25px;
display: flex;
justify-content: center;
align-items: center;
transition: border 200ms ease-out, background 200ms ease-out, color 200ms ease-out;
}
.social-container a:hover {
border-color: black;
background: #222;
color: whitesmoke;
}
</style>
</head>
<body>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<section class="box">
<div class="container">
<div class="card left">
<div class="face card-front">
<div class="signin-form">
<form action="javascript:void(0);">
<h2>Sign in</h2>
<div class="social-container">
<a href="javascript:void(0);" class="social" id="fb"><i
class="fab fa-facebook-f"></i></a>
<a href="javascript:void(0);" class="social" id="gp"><i
class="fab fa-google-plus-g"></i></a>
<a href="javascript:void(0);" class="social" id="lin"><i
class="fab fa-linkedin-in"></i></a>
</div>
<span class="formspan">or use your registered account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<span class="olspan forgot"><a href="javascript:void(0);">Forgot your
password?</a></span>
<button class="formbtn">Sign in</button>
</form>
</div>
</div>
<div class="face card-back">
<div class="panel">
<h2>Welcome back!</h2>
<span class="panelspan">To keep connected with us please login with your personal
info</span>
<button class="panelbtn signInBtn">Sign In</button>
</div>
</div>
</div>
<div class="card right">
<div class="face card-front">
<div class="panel">
<h2>Hello, Friend!</h2>
<span class="panelspan">Enter your personal details and start journey with us</span>
<button class="panelbtn signUpBtn">Sign Up</button>
</div>
</div>
<div class="face card-back">
<div class="signup-form">
<form action="javascript:void(0);">
<h2>Create Account</h2>
<div class="social-container">
<a href="javascript:void(0);" class="social" id="fb"><i
class="fab fa-facebook-f"></i></a>
<a href="javascript:void(0);" class="social" id="gp"><i
class="fab fa-google-plus-g"></i></a>
<a href="javascript:void(0);" class="social" id="lin"><i
class="fab fa-linkedin-in"></i></a>
</div>
<span class="formspan">or use your email for registration</span>
<input type="email" placeholder="Email" />
<input type="name" placeholder="Username" />
<input type="password" placeholder="Password" />
<button class="formbtn">Sign up</button>
</form>
</div>
</div>
</div>
</div>
</section>
<script>
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var signUp = document.querySelector('.signUpBtn');
var signIn = document.querySelector('.signInBtn');
signUp.addEventListener('click', function () {
left.classList.add('flip');
right.classList.add('flip');
});
signIn.addEventListener('click', function () {
left.classList.remove('flip');
right.classList.remove('flip');
});
</script>
</body>
</body>
</html>
- box：作为整个页面的容器，居中显示。
- container：包含两个card元素，分别代表登录和注册的卡片。
- 两个face，分别代表卡片的正面和背面。
- 登录卡片的正面包含一个登录表单，背面包含欢迎信息。
- 注册卡片的正面包含注册信息，背面包含一个注册表单。
- input标签用于输入电子邮件、密码、用户名等。
- button标签用于提交表单和触发翻转效果。
- .card：设置为相对定位，宽度为容器的50%，高度100%。
- .face：绝对定位，覆盖整个卡片，背景色为#EEE。
- .card.flip：使用transform属性实现翻转效果。
- .panel、.face、form：使用Flexbox布局，居中对齐。
- input、button：设置输入框和按钮的样式，包括边框、背景色、圆角等。
- ::placeholder：设置占位符文本的样式。
- .social-container：使用Flexbox布局社交登录按钮。
- .social-container a：设置社交登录按钮的样式，包括颜色、背景、圆角等。
- a、button：设置链接和按钮的悬停和焦点状态的样式变化。
- 使用transition属性为颜色和变换添加过渡效果。
- 通过监听.signUpBtn和.signInBtn按钮的点击事件，实现卡片的翻转效果。