css制作地图

使用CSS制作地图的基本方法

通过CSS的伪元素、边框、阴影等属性可以创建简单的地图轮廓或区块效果。例如用div和border模拟地图边界：

.map-container {
  width: 300px;
  height: 200px;
  position: relative;
  background: #e0f7fa;
}
.country {
  position: absolute;
  width: 60px;
  height: 40px;
  background: #4caf50;
  border-radius: 8px;
}
.country::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 65px;
  width: 30px;
  height: 20px;
  background: #ff9800;
}

SVG与CSS结合实现地图

更推荐使用SVG绘制地图路径，通过CSS控制样式交互：

<svg viewBox="0 0 100 100" class="map-svg">
  <path d="M10 10 L90 10 L50 90 Z" class="region"/>
</svg>

.map-svg {
  width: 100%;
  height: auto;
}
.region {
  fill: #2196f3;
  stroke: #0d47a1;
  transition: fill 0.3s;
}
.region:hover {
  fill: #ff5722;
}

使用CSS Grid布局地图元素

对于区块化地图（如游戏地图），可用Grid布局：

.tile-map {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  width: 250px;
}
.tile {
  aspect-ratio: 1;
  background: #8bc34a;
}
.tile.water {
  background: #03a9f4;
}

动画效果增强

添加CSS动画使地图元素更生动：

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.highlight-region {
  animation: pulse 2s infinite;
  filter: drop-shadow(0 0 8px rgba(255,235,59,0.6));
}

响应式适配

通过媒体查询确保不同设备上的显示：

@media (max-width: 600px) {
  .map-container {
    width: 100%;
    height: auto;
  }
  .tile-map {
    grid-template-columns: repeat(3, 1fr);
  }
}

实际项目中，复杂地图建议使用专业地图库（如Leaflet.js）配合CSS样式定制。简单可视化可使用纯CSS方案，但需注意性能优化。