当前位置：首页 > CSS

css怎么制作相册

2026-03-11 23:13:20CSS

使用CSS Grid布局制作相册

CSS Grid布局非常适合创建响应式相册，可以轻松控制行列间距和图片大小。

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 15px;
  padding: 15px;
}

.photo-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.photo-gallery img:hover {
  transform: scale(1.05);
}

使用Flexbox实现相册布局

Flexbox提供了另一种创建相册的方式，特别适合需要灵活调整图片顺序的情况。

.photo-album {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.photo-album .photo-item {
  flex: 1 1 300px;
  max-width: 350px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.photo-album img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: all 0.3s ease;
}

添加悬停效果增强交互性

通过CSS过渡和变换可以为相册添加视觉反馈。

.photo-card {
  position: relative;
  overflow: hidden;
}

.photo-card img {
  transition: filter 0.3s ease;
}

.photo-card:hover img {
  filter: brightness(0.7);
}

.photo-card .caption {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 15px;
  transition: bottom 0.3s ease;
}

.photo-card:hover .caption {
  bottom: 0;
}

创建响应式相册

使用媒体查询确保相册在不同设备上都能良好显示。

@media (max-width: 768px) {
  .photo-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .photo-gallery {
    grid-template-columns: 1fr;
  }
}

添加相册滤镜和分类功能

通过CSS可以为相册添加分类筛选功能。

css怎么制作相册

.filter-button {
  padding: 8px 16px;
  margin: 5px;
  background: #f1f1f1;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.filter-button.active {
  background: #333;
  color: white;
}

.photo-item {
  display: none;
}

.photo-item.show {
  display: block;
}

这些CSS技术可以组合使用，根据具体需求创建不同风格的相册布局。通过调整网格列数、图片比例、间距和动画效果，可以打造出独特而专业的相册展示效果。