当前位置：首页 > CSS

css照片墙制作

2026-04-02 10:05:32CSS

基础布局与样式

使用CSS Grid或Flexbox创建照片墙的基础布局。Grid适合规整的排列，Flexbox更适合灵活的自适应布局。以下是一个Grid示例：

.photo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
}
.photo-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.photo-item:hover {
  transform: scale(1.05);
}

图片自适应处理

确保图片在不同容器尺寸下保持比例且充满容器：

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

悬停效果增强

添加遮罩层和文字说明的悬停交互：

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

响应式设计

通过媒体查询调整列数和间距：

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

滤镜与动画

为照片添加CSS滤镜和加载动画：

css照片墙制作

.photo-item img {
  filter: brightness(0.95);
  transition: filter 0.3s;
}
.photo-item:hover img {
  filter: brightness(1.1);
}

/* 加载动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.photo-item {
  animation: fadeIn 0.5s ease forwards;
}

完整HTML结构参考

<div class="photo-wall">
  <div class="photo-item">
    <img src="photo1.jpg" alt="描述">
    <div class="photo-caption">标题文字</div>
  </div>
  <!-- 更多照片项 -->
</div>