当前位置：首页 > CSS

css 制作主题相册

2026-03-12 10:51:37CSS

使用CSS制作主题相册

通过CSS可以创建响应式、美观的主题相册，以下是一种常见的实现方法：

基础HTML结构

<div class="photo-album">
  <div class="photo">
    <img src="image1.jpg" alt="照片1">
    <div class="caption">描述文字1</div>
  </div>
  <div class="photo">
    <img src="image2.jpg" alt="照片2">
    <div class="caption">描述文字2</div>
  </div>
  <!-- 更多照片 -->
</div>

网格布局样式

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

.photo {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.photo img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

悬停效果

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

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

.photo:hover .caption {
  transform: translateY(0);
}

响应式调整

@media (max-width: 600px) {
  .photo-album {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
}

添加滤镜效果

.photo {
  filter: grayscale(20%);
  transition: filter 0.3s ease;
}

.photo:hover {
  filter: grayscale(0%);
}

主题颜色定制

通过CSS变量可以轻松更换主题：

css 制作主题相册

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

.photo-album {
  background-color: var(--primary-color);
}

.caption {
  background-color: var(--secondary-color);
}

动画效果增强

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.photo {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

.photo:nth-child(1) { animation-delay: 0.1s; }
.photo:nth-child(2) { animation-delay: 0.2s; }
/* 为每张照片设置不同的延迟 */

这些CSS技术可以组合使用，创建出各种风格的主题相册。根据具体需求，可以调整网格布局、过渡效果、颜色方案等参数。