css制作许愿墙六块

使用CSS制作许愿墙六块布局

许愿墙通常由多个区块组成，每个区块可以放置不同的内容或愿望卡片。以下是一个使用CSS实现六块许愿墙布局的方法。

HTML结构

<div class="wish-wall">
  <div class="wish-block">愿望1</div>
  <div class="wish-block">愿望2</div>
  <div class="wish-block">愿望3</div>
  <div class="wish-block">愿望4</div>
  <div class="wish-block">愿望5</div>
  <div class="wish-block">愿望6</div>
</div>

CSS样式

.wish-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.wish-block {
  background-color: #ffebee;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #d32f2f;
  transition: transform 0.3s ease;
}

.wish-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

响应式设计

为适应不同屏幕尺寸，可以添加媒体查询：

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

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

动画效果增强

为每个愿望块添加独特的动画：

.wish-block:nth-child(1) {
  background: linear-gradient(135deg, #ffcdd2, #ef9a9a);
}

.wish-block:nth-child(2) {
  background: linear-gradient(135deg, #f8bbd0, #f48fb1);
}

.wish-block:nth-child(3) {
  background: linear-gradient(135deg, #e1bee7, #ce93d8);
}

.wish-block:nth-child(4) {
  background: linear-gradient(135deg, #d1c4e9, #b39ddb);
}

.wish-block:nth-child(5) {
  background: linear-gradient(135deg, #c5cae9, #9fa8da);
}

.wish-block:nth-child(6) {
  background: linear-gradient(135deg, #bbdefb, #90caf9);
}

交互功能

添加点击效果：

document.querySelectorAll('.wish-block').forEach(block => {
  block.addEventListener('click', () => {
    block.classList.toggle('active');
  });
});

配合CSS：

.wish-block.active {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

这个实现创建了一个3×2网格的许愿墙布局，具有响应式设计、悬停效果和点击交互功能。每个愿望块都有不同的渐变色背景，使整体视觉效果更加丰富多彩。