css地图制作吧

2026-04-02 03:44:11CSS

CSS地图制作方法

使用CSS创建地图主要依赖于HTML结构和CSS样式，以下是几种常见实现方式：

使用SVG与CSS结合

<svg viewBox="0 0 800 400">
  <path class="country" d="M100,100L200,150L300,100Z"/>
</svg>

.country {
  fill: #4CAF50;
  stroke: #388E3C;
  stroke-width: 2;
  transition: fill 0.3s;
}
.country:hover {
  fill: #8BC34A;
}

纯CSS绘制简单地图

通过绝对定位和边框实现基本形状：

css地图制作吧

<div class="map-container">
  <div class="land"></div>
  <div class="river"></div>
</div>

.map-container {
  position: relative;
  width: 500px;
  height: 300px;
  background: #B3E5FC;
}
.land {
  position: absolute;
  width: 70%;
  height: 80%;
  background: #8BC34A;
  border-radius: 30% 70% 50% 50%/60% 60% 40% 40%;
}
.river {
  position: absolute;
  width: 10%;
  height: 80%;
  background: #03A9F4;
  left: 40%;
  border-radius: 50%;
}

使用CSS Grid布局

创建网格化地图：

css地图制作吧

<div class="grid-map">
  <div class="cell plain"></div>
  <div class="cell mountain"></div>
</div>

.grid-map {
  display: grid;
  grid-template-columns: repeat(10, 30px);
  grid-template-rows: repeat(10, 30px);
}
.cell {
  border: 1px solid #ddd;
}
.plain { background: #CDDC39; }
.mountain { background: #795548; }

动画效果增强

为地图元素添加交互效果：

.city {
  width: 10px;
  height: 10px;
  background: #F44336;
  border-radius: 50%;
  transform: scale(1);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

响应式设计

确保地图适应不同屏幕：

@media (max-width: 600px) {
  .map-container {
    width: 100%;
    height: 200px;
  }
  .grid-map {
    grid-template-columns: repeat(10, 10%);
    grid-template-rows: repeat(10, 10%);
  }
}