现代 CSS 卡片

CSS 卡片是一个在现代前端开发中广泛使用的概念，它可以用于展示内容、文本和图像等。本文将介绍如何使用最新的 CSS 技术创建现代 CSS 卡片。

1. 基础样式

在创建卡片之前，先在 CSS 中定义一些基础样式：

.card {
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  background-color: #fff;
  padding: 16px;
}

以上代码定义了一个卡片的基础样式，包括：

• 圆角；
• 阴影；
• 背景色；
• 内边距。

2. 细节样式

紧接着，我们可以添加一些细节样式来美化卡片：

.card {
  border: 1px solid #eaeaea;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 15px 24px;
}

以上代码定义了卡片的边框和动画。

3. 加载效果

你还可以为卡片添加一个简单的加载效果：

@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

.card.loading::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
  animation: pulsate 1.2s ease-in-out infinite;
}

以上代码定义了一个名为 loading 的 CSS 类，当在卡片上添加此类时，会为其添加一个加载效果。

4. 图片样式

最后，我们可以为包含图片的卡片添加一些额外样式：

.card .image {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card .image:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.card .image img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 8px 8px 0 0;
}

以上代码定义了一个 .image 类，它具有以下功能：

• 设置图片容器为相对定位；
• 设置图片容器高度为 0，以使其纵横比与所包含的图片相同；
• 设置背景图像的填充为 cover，位置在中心；
• 使用伪元素建立容器的 100% 宽度；
• 将图片设置为绝对定位。

总结

在上文中，我们已经为卡片创建定义了基础样式、细节样式、加载效果和图片样式，您可以根据您的实际需求对其进行修改，以适应您的应用程序。

一个完整的现代 CSS 卡片的示例代码如下：

.card {
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  background-color: #fff;
  padding: 16px;
  border: 1px solid #eaeaea;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 15px 24px;
}

@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

.card.loading::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
  animation: pulsate 1.2s ease-in-out infinite;
}

.card .image {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card .image:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.card .image img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 8px 8px 0 0;
}

以上代码适用于 Markdown 和 HTML 等网页文档。