当前位置：首页 > CSS

css相册制作

2026-01-28 08:17:32CSS

使用CSS Grid布局制作相册

创建一个响应式的相册布局，CSS Grid是理想选择。定义网格容器和项目：

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

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

添加悬停动画效果

为照片添加缩放和过渡效果增强交互性：

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

实现图片滤镜效果

通过CSS滤镜属性创建不同的视觉效果：

css相册制作

/* 黑白滤镜 */
.bw-filter {
  filter: grayscale(100%);
}

/* 复古滤镜 */
.vintage-filter {
  filter: sepia(80%) brightness(90%) contrast(110%);
}

/* 模糊效果 */
.blur-filter {
  filter: blur(2px);
}

创建相册标题和描述

添加文字层叠效果：

.photo-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-item:hover .photo-caption {
  transform: translateY(0);
}

响应式设计调整

针对不同屏幕尺寸调整布局：

css相册制作

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

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

添加加载动画

为图片加载过程添加视觉反馈：

.photo-item {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

实现灯箱效果

点击图片放大查看的CSS方案：

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.lightbox:target {
  display: flex;
}

这些CSS技术可以组合使用来创建各种风格的相册效果，从简约网格布局到复杂的交互式展示。根据项目需求选择合适的技术组合，并通过调整参数实现个性化设计。