这段代码是一个 HTML 页面，它包含了 CSS 样式，用于创建一个具有动态背景效果的卡片。卡片上显示了一些文本和一个输入框，用于用户输入手机号码，还有一个按钮用于重置密码。当鼠标悬停在卡片上时，背景会旋转并放大。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号关注：前端Hardy</title>
<style>
body {
margin: 0;
padding: 0;
background: #212121;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.card {
width: 230px;
height: 230px;
position: relative;
background-color: rgb(255, 255, 255);
border-bottom: 3px solid #4c6bff;
overflow: hidden;
-webkit-box-shadow: 0px 12px 65px -39px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 12px 65px -39px rgba(0, 0, 0, 1);
box-shadow: 0px 12px 65px -39px rgba(0, 0, 0, 1);
border-radius: 5px;
}
.BG {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.BG svg {
position: absolute;
width: 50%;
left: -20%;
top: -20%;
fill: rgb(244, 244, 244);
transition: all 0.5s;
}
.content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 25px;
box-sizing: border-box;
color: rgb(30, 30, 30);
gap: 3px;
}
.heading {
font-size: 1.4em;
font-weight: 700;
color: rgb(30, 30, 30);
margin: 5px 0;
}
.sub-heading {
margin-top: -7px;
font-size: 0.9em;
font-weight: 600;
margin: 5px 0;
color: rgb(30, 30, 30);
}
.sub-sub-heading {
margin: 5px 0;
font-size: 0.7em;
color: rgb(128, 128, 128);
}
.Phone {
width: 100%;
height: 25px;
margin-top: 20px;
border: none;
border-bottom: 1px solid #c0c7ec;
outline: none;
font-size: 0.7em;
background-color: transparent;
}
.card-btn {
margin-top: 10px;
height: 30px;
line-height: 30px;
width: 80%;
border: none;
background: linear-gradient(60deg, #4c6bff, #8196ff);
color: white;
border-radius: 30px;
cursor: pointer;
}
.card:hover .BG svg {
left: 0%;
top: 0%;
transform: rotate(180deg) scale(9);
fill: #c0c7ec;
}
</style>
</head>
<body>
<div class="card">
<div class="BG">
<svg viewBox="0 0 512 512" class="ionicon" xmlns="http://www.w3.org/2000/svg">
<path
d="M256 176a80 80 0 1080 80 80.24 80.24 0 00-80-80zm172.72 80a165.53 165.53 0 01-1.64 22.34l48.69 38.12a11.59 11.59 0 012.63 14.78l-46.06 79.52a11.64 11.64 0 01-14.14 4.93l-57.25-23a176.56 176.56 0 01-38.82 22.67l-8.56 60.78a11.93 11.93 0 01-11.51 9.86h-92.12a12 12 0 01-11.51-9.53l-8.56-60.78A169.3 169.3 0 01151.05 393L93.8 416a11.64 11.64 0 01-14.14-4.92L33.6 331.57a11.59 11.59 0 012.63-14.78l48.69-38.12A174.58 174.58 0 0183.28 256a165.53 165.53 0 011.64-22.34l-48.69-38.12a11.59 11.59 0 01-2.63-14.78l46.06-79.52a11.64 11.64 0 0114.14-4.93l57.25 23a176.56 176.56 0 0138.82-22.67l8.56-60.78A11.93 11.93 0 01209.94 26h92.12a12 12 0 0111.51 9.53l8.56 60.78A169.3 169.3 0 01361 119l57.2-23a11.64 11.64 0 0114.14 4.92l46.06 79.52a11.59 11.59 0 01-2.63 14.78l-48.69 38.12a174.58 174.58 0 011.64 22.66z">
</path>
</svg>
</div>
<div class="content">
<p class="heading">可爱的朋友啊!</p>
<p class="sub-heading">忘记密码啦?</p>
<p class="sub-sub-heading">输入要恢复的手机号</p>
<input class="Phone" placeholder="Phone" type="text" />
<button class="card-btn">重置密码</button>
</div>
</div>
</body>
</html>
HTML 结构
- card: 创建一个类名为card的 div 元素，用于包含整个卡片。
- BG: 包含背景 SVG 的 div。
- svg: 创建一个 SVG 图形，用于背景效果。
- content: 包含卡片的主要内容。
- heading: 显示卡片的标题。
- sub-heading: 显示卡片的副标题。
- sub-sub-heading: 显示卡片的子标题。
- Phone: 创建一个输入框，用于用户输入手机号码。
- card-btn: 创建一个按钮，用于重置密码。
CSS 样式
- body: 设置页面的边距、填充、背景色、显示方式和高度。
- .card: 设置卡片的样式，包括尺寸、背景色、边框、阴影和边框半径。
- .BG: 设置背景容器的样式，包括尺寸、位置和对齐方式。
- .BG svg: 设置 SVG 图形的样式，包括位置、尺寸、填充色和过渡效果。
- .content: 设置卡片内容的样式，包括尺寸、位置、对齐方式和内边距。
- .heading: 设置卡片标题的样式，包括字体大小和权重。
- .sub-heading: 设置卡片副标题的样式，包括字体大小和权重。
- .sub-sub-heading: 设置卡片子标题的样式，包括字体大小和颜色。
- .Phone: 设置输入框的样式，包括尺寸、边框、字体大小和背景色。
- .card-btn: 设置按钮的样式，包括尺寸、背景渐变、颜色和边框半径。
- .card:hover .BG svg: 设置鼠标悬停在卡片上时 SVG 图形的样式，使其旋转、放大并改变填充色。
