当前位置：首页 > CSS

css怎样制作相册

2026-04-02 11:10:26CSS

使用CSS Grid布局创建相册

通过CSS Grid可以快速实现响应式相册布局。定义一个包含图片的容器，设置display: grid并调整列数和间距：

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

图片样式建议添加过渡效果和悬停缩放：

.gallery-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

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

使用Flexbox实现瀑布流相册

Flexbox适合创建不规则高度的图片排列。设置容器为flex布局并允许换行：

.masonry-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery-item {
  flex: 1 0 auto;
  margin-bottom: 10px;
}

为不同高度的图片添加特定类名：

css怎样制作相册

.tall { height: 300px; }
.wide { height: 200px; }

添加图片滤镜和覆盖效果

通过伪元素实现鼠标悬停时的覆盖层效果：

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

.photo-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.photo-card:hover::after {
  opacity: 1;
}

实现图片加载过渡动画

为图片添加加载时的淡入效果：

css怎样制作相册

.gallery-img {
  opacity: 0;
  transition: opacity 0.5s;
}

.gallery-img.loaded {
  opacity: 1;
}

配合JavaScript在图片加载完成后添加loaded类：

document.querySelectorAll('.gallery-img').forEach(img => {
  if(img.complete) {
    img.classList.add('loaded');
  } else {
    img.addEventListener('load', () => {
      img.classList.add('loaded');
    });
  }
});

响应式设计调整

通过媒体查询在不同屏幕尺寸下调整布局：

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

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

添加相册标题和描述

为每张图片创建包含文字说明的卡片：

.caption {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  padding: 10px;
  background: rgba(0,0,0,0.7);
  color: white;
  transition: bottom 0.3s;
}

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