HTML&CSS ：必学！动态悬停卡片
<p>这段代码实现了一个具有动态悬停效果的卡片界面，适合用于展示人物信息、产品介绍或其他内容。卡片的交互性和视觉效果使其更具吸引力和用户友好性。</p><hr />
<h2>演示效果</h2>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/vAEun6t7OdibSL2ialQ8F6xDliakagylI7lRDLtuGJo070WgtTZnq7hOV1TNUOZxibKbIM845b9uqC1jBLtkerWaoA/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>HTML&CSS</h2>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>站长论坛 3bbs.cn</title>
<style>
body {
margin: 0;
padding: 0;
background: #212121;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.card {
width: 300px;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 10px;
background-color: #fffffe;
border-radius: 15px;
position: relative;
overflow: hidden;
transition: all 0.5s ease;
}
.card::before {
content: "";
width: 300px;
height: 100px;
position: absolute;
top: 0;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom: 3px solid #fefefe;
background: linear-gradient(40deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
transition: all 0.3s ease;
}
.card * {
z-index: 1;
}
.image {
width: 80px;
height: 80px;
background-color: #1468BF;
border-radius: 50%;
border: 4px solid #fefefe;
transition: all 0.5s ease;
}
.card-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
transition: all 0.5s ease;
}
.card-infospan {
font-weight: 600;
font-size: 24px;
color: #161A42;
margin-top: 15px;
line-height: 5px;
}
.card-infop {
color: rgba(0, 0, 0, 0.5);
}
.button {
text-decoration: none;
background-color: #1468BF;
color: white;
padding: 4px16px;
border-radius: 5px;
border: 1px solid white;
transition: all 0.5s ease;
font-size: 14px;
}
.card:hover {
width: 250px;
border-radius: 250px;
}
.card:hover::before {
width: 250px;
height: 250px;
border-radius: 50%;
border-bottom: none;
transform: scale(0.95);
}
.card:hover.card-info {
transform: translate(0%, -15%);
}
.button:hover {
background-color: #FF6844;
transform: scale(1.04);
}
</style>
</head>
<body>
<div class="card">
<img class="image" src="https://q0.itc.cn/q_70/images01/20241113/3396209866c743f7af0688eed32999e9.jpeg" alt="">
<div class="card-info">
<span>勒布朗.詹姆斯</span>
<p>NBA得分王</p>
</div>
<a class="button" href="#">更多</a>
</div>
</body>
</html>
</code></pre>
<h2>HTML 结构</h2>
<ul>
<li>card：卡片的容器，包含整个卡片的内容。</li>
<li>image：卡片中的圆形头像图片。</li>
<li>card-info：卡片中的信息区域，包含标题和描述。</li>
<li>span：卡片标题，显示“勒布朗·詹姆斯”。</li>
<li>p：卡片描述，显示“NBA得分王”。</li>
<li>button：卡片中的按钮，链接到其他页面，显示“更多”。</li>
</ul>
<h2>CSS 样式</h2>
<ul>
<li>.card：定义卡片的样式，包括大小、背景颜色、圆角、过渡动画和布局方式。</li>
<li>.card::before：卡片顶部的渐变装饰层，具有动画效果。</li>
<li>.image：定义头像图片的样式，包括大小、背景颜色、边框和圆角。</li>
<li>.card-info：定义卡片信息区域的样式，包括布局方式和间距。</li>
<li>.card-info span：定义卡片标题的样式，包括字体大小、颜色和间距。</li>
<li>.card-info p：定义卡片描述的样式，包括字体颜色。</li>
<li>.button：定义按钮的样式，包括背景颜色、边框、圆角和悬停效果。</li>
<li>.card:hover：鼠标悬停时，卡片变为圆形，大小和形状发生变化。</li>
<li>.card:hover::before：鼠标悬停时，卡片顶部装饰层的大小和形状发生变化。</li>
<li>.card:hover .card-info：鼠标悬停时，卡片信息区域向上移动。</li>
<li>.button:hover：鼠标悬停时，按钮颜色变化并轻微放大。</li>
</ul>
页:
[1]