css制作游戏列表

使用CSS制作游戏列表

创建一个游戏列表可以通过HTML和CSS结合实现，以下是一个常见的设计方案：

HTML结构示例

<div class="game-list">
  <div class="game-card">
    <img src="game1.jpg" alt="Game 1">
    <h3>Game Title 1</h3>
    <p>Description of the game...</p>
    <button>Play Now</button>
  </div>
  <!-- 更多游戏卡片 -->
</div>

基础CSS样式

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

.game-card {
  background: #2a2a2a;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.game-card:hover {
  transform: translateY(-5px);
}

.game-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.game-card h3 {
  color: white;
  padding: 10px 15px;
  margin: 0;
}

.game-card p {
  color: #aaa;
  padding: 0 15px 15px;
  font-size: 14px;
}

.game-card button {
  background: #ff4757;
  color: white;
  border: none;
  padding: 8px 15px;
  margin: 0 15px 15px;
  border-radius: 5px;
  cursor: pointer;
}

响应式设计

@media (max-width: 768px) {
  .game-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

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

添加动画效果

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.game-card {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

.game-card:nth-child(1) { animation-delay: 0.1s; }
.game-card:nth-child(2) { animation-delay: 0.2s; }
.game-card:nth-child(3) { animation-delay: 0.3s; }

评分系统样式

如果需要显示游戏评分：

<div class="rating">
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
</div>

.rating {
  color: #ffd700;
  padding: 0 15px 10px;
  font-size: 18px;
}

.star {
  margin-right: 2px;
}

这些CSS样式可以创建一个现代化、响应式的游戏列表界面，包含基本的布局、悬停效果和动画。可以根据实际需求调整颜色、间距和尺寸等参数。