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网格的许愿墙布局，具有响应式设计、悬停效果和点击交互功能。每个愿望块都有不同的渐变色背景，使整体视觉效果更加丰富多彩。
