前端练习＜Html&CSS＞——悬浮抽卡片（附完整代码及实现效果）
warning:
这篇文章距离上次修改已过202天，其中的内容可能已经有所变动。
以下是实现悬浮抽卡片效果的完整HTML和CSS代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>悬浮抽卡片</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
position: relative;
}
.card {
width: 200px;
height: 260px;
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
transition: transform 0.2s ease-in-out;
}
.card:hover {
transform: translateY(-10px) scale(1.05);
}
.card-content {
text-align: center;
padding: 10px;
}
.card-content img {
width: 100px;
height: 100px;
margin-bottom: 10px;
border-radius: 50%;
object-fit: cover;
}
.card-content h2 {
font-size: 18px;
margin: 0;
}
.card-content p {
margin: 0;
font-size: 14px;
color: #555;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-content">
<img src="https://randomuser.me/api/portraits/women/85.jpg" alt="Profile Photo">
<h2>John Doe</h2>
<p>Front-end Developer</p>
</div>
</div>
</div>
</body>
</html>这段代码创建了一个简单的悬浮抽卡片效果。用户将鼠标悬停在卡片上时，卡片会上移并稍微放大，模拟一种悬浮的效果。这是一个很好的练习，可以帮助初学者熟悉CSS的动画效果和交互设计。
评论已关闭