使用 HTML 和 CSS 具有悬停效果的响应式卡片

简介

卡片是一种常见的 UI 元素，应用在网站或手机应用中，用于显示一些信息（如图像、标题、摘要、日期等）。在本文中，我们将学习如何使用HTML和CSS创建响应式卡片，并添加悬停效果以提高用户体验。

HTML 结构

在我们开始编写 CSS 样式之前，让我们来看一下 HTML 结构。本例中，我们将展示一组卡片。每个卡片都由 HTML 的一系列嵌套元素组成，如下所示：

<div class="card">
  <img src="img1.jpg" alt="Card Image" class="card-img">
  <div class="card-content">
    <h3 class="card-title">Card Title</h3>
    <p class="card-text">Card Text</p>
    <a href="#" class="card-button">Card Button</a>
  </div>
</div>

在这个代码中，我们使用了一个 <div> 元素来创建一个 card 容器。在容器中，我们又添加了一个 <img> 元素用于显示卡片图片，一个 card-content 容器用于显示卡片标题、摘要和一个操作按钮。

CSS 样式

下面是 CSS 样式片段。首先，我们来给基础的卡片设置一个框边，一个阴影和一个圆角，以达到更加友好的外观。

.card {
  position: relative;
  width: 100%;
  max-width: 300px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

在卡片上设置绝对定位，使其子元素更方便地进行相对定位。card-img 元素设置一个百分比宽度并把 max-width 设为 100% 以适应它的容器。card-content 容器设置左右10像素的内边距，卡片标题使用 font-size 设置文本大小。

.card {
  position: relative;
  width: 100%;
  max-width: 300px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.card-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px 5px 0px 0px;
}

.card-content {
  padding: 10px;
}

.card-title {
  font-size: 22px;
  margin: 0 0 10px;
}

接下来，我们将添加一个悬停效果来增强卡片的可读性。当鼠标移到卡片上时，卡片标题和摘要将淡入。实际上，我们使用了 CSS 动画来实现这个效果。当鼠标没有悬停时，标题和摘要文本的透明度为 0，而当鼠标悬停时，它们的透明度被设置为 1。

.card-title,
.card-text {
  opacity: 0;
  transition: all 0.3s ease;
}

.card:hover .card-title,
.card:hover .card-text {
  opacity: 1;
}

最后是卡片按钮的样式。我们使用 CSS 动画使按钮从上向下运动，以增加动态效果。

.card-button {
  display: inline-block;
  padding: 10px 15px;
  margin-top: 10px;
  color: #fff;
  background-color: #4CAF50;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.card-button:hover {
  transform: translateY(5px);
  box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}

结语

现在，您已经学习了如何使用HTML和CSS创建响应式的卡片，并添加了悬停效果以提高用户体验。这是一种非常常见的 UI 元素，希望这些技术能帮助您更好地设计网站或手机应用程序。