当前位置：首页 > CSS

纯css制作相册

2026-04-01 18:14:52CSS

使用纯CSS制作相册

纯CSS相册可以通过CSS的动画、过渡和布局技术实现，无需JavaScript。以下是几种常见的实现方式：

网格布局相册

使用CSS Grid布局创建一个响应式相册，适合展示多张图片。

纯css制作相册

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

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

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

轮播相册

通过CSS动画实现自动轮播的相册效果。

.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-inner {
  display: flex;
  animation: slide 10s infinite;
}

.carousel img {
  min-width: 100%;
}

@keyframes slide {
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(-100%); }
  50%, 70% { transform: translateX(-200%); }
  75%, 95% { transform: translateX(-300%); }
  100% { transform: translateX(-400%); }
}

悬停放大效果

为相册图片添加悬停放大效果，增强交互性。

纯css制作相册

.photo-container {
  display: inline-block;
  overflow: hidden;
  margin: 10px;
}

.photo-container img {
  transition: transform 0.5s;
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.photo-container img:hover {
  transform: scale(1.2);
}

相册模态框

使用CSS伪类和:target选择器实现点击图片放大的效果。

.thumbnail {
  width: 100px;
  height: 100px;
  margin: 5px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
}

.modal:target {
  display: flex;
}

.modal img {
  max-width: 80%;
  max-height: 80%;
}

3D旋转相册

利用CSS 3D变换创建具有立体感的相册。

.photo-3d {
  perspective: 1000px;
  width: 300px;
  height: 200px;
  margin: 0 auto;
}

.photo-3d-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
}

.photo-3d-inner img {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}