css展示卡制作

CSS 展示卡制作方法

基础结构

使用 HTML 创建卡片容器和内容区域：

<div class="card">
  <img src="image.jpg" alt="示例图片">
  <div class="card-content">
    <h3>卡片标题</h3>
    <p>卡片描述内容</p>
    <button>点击按钮</button>
  </div>
</div>

核心样式

通过 CSS 实现卡片视觉效果：

.card {
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  font-family: sans-serif;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
  background: white;
}

.card h3 {
  margin: 0 0 10px;
  color: #333;
}

.card p {
  margin: 0 0 15px;
  color: #666;
  line-height: 1.5;
}

.card button {
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

进阶效果

添加悬停动画和阴影增强交互：

.card {
  perspective: 1000px;
}

.card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
  background: #f8f9fa;
  padding: 20px;
}

响应式设计

确保在不同设备上正常显示：

@media (max-width: 768px) {
  .card {
    width: 100%;
    margin-bottom: 20px;
  }
}

颜色变量

使用 CSS 变量便于主题修改：

:root {
  --primary-color: #3498db;
  --text-color: #333;
  --shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card {
  box-shadow: var(--shadow);
}

.card h3 {
  color: var(--text-color);
}

.card button {
  background: var(--primary-color);
}

网格布局

多卡片排列方案：

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}