CSS 地圖效果圖是指在網頁中利用 CSS 技術繪制的地圖。通過設置不同的樣式和屬性，可以實現不同的效果，比如地圖的縮放、移動、標注和標記等功能。下面就來介紹一些常見的地圖效果。

/* 地圖容器 */
.map {
width: 500px;
height: 300px;
border: 1px solid #ccc;
position: relative;
overflow: hidden;
}
/* 地圖背景圖 */
.map__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('map-bg.png') center center no-repeat;
background-size: cover;
}
/* 地圖標記 */
.map__marker {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: #f00;
box-shadow: 0 0 6px rgba(255, 0, 0, .5);
}
/* 地圖標注 */
.map__label {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
background: rgba(255, 255, 255, .8);
border-radius: 6px;
box-shadow: 0 0 6px rgba(0, 0, 0, .5);
font-size: 14px;
line-height: 1.5;
}

上述代碼實現了一個簡單的地圖效果，包括了以下幾個部分：

• 地圖容器，設置了寬高和邊框，并且隱藏了超出容器的內容。
• 地圖背景圖，設置了絕對定位和背景圖片，實現了地圖的顯示。
• 地圖標記，設置了絕對定位和樣式屬性，實現了在地圖上顯示標記點。
• 地圖標注，設置了絕對定位和樣式屬性，實現了在地圖上顯示標注信息。

通過調整標記點和標注信息的位置和樣式，可以實現不同的地圖效果。比如增加縮放和移動功能，可以使用 JavaScript 技術和 CSS 動畫庫來實現，讓用戶體驗更加流暢和自然。