CSS3 地球選擇

CSS3 地球選擇是指使用 CSS3 技術來制作一個帶動畫效果的地球選擇器。通過鼠標懸停或點擊地球不同區域，可以實現不同的交互效果。

為了實現地球選擇，需要準備一個地球圖，然后通過 CSS3 中的 transform、animation 和 transition 屬性來實現動畫效果。

/* 地球圖樣式 */
.earth {
background-image: url(earth.png);
background-size: 100%;
position: relative;
width: 400px;
height: 400px;
}
/* 默認狀態 */
.earth .selector {
position: absolute;
width: 20px;
height: 20px;
background-color: #ffffff;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in-out;
}
/* 懸浮狀態 */
.earth .selector:hover {
box-shadow: 0 0 10px #ffffff;
transform: scale(2) translate(-50%, -50%);
}
/* 點擊狀態 */
.earth .selector.active {
box-shadow: 0 0 20px #ffffff;
transform: scale(3) translate(-50%, -50%);
animation: pulse 1s infinite;
}
/* 點擊狀態的動畫 */
@keyframes pulse {
0% {
transform: scale(3) translate(-50%, -50%);
opacity: 1;
}
100% {
transform: scale(4) translate(-50%, -50%);
opacity: 0;
}
}

在上面的代碼中，我們使用了 .earth 類來定義地球圖的樣式，并在其中創建一個 .selector 類來表示地球上的選擇器。默認狀態下，.selector 類的大小為 20px，白色背景，使用了圓形邊框半徑來實現圓形效果。

當鼠標懸浮在 .selector 上時，使用了 transform 屬性來實現放大效果，并設置了一個白色的陰影來突出選擇器的位置。

當 .selector 被點擊時，我們使用了 active 類來表示其處于激活狀態。此時，我們使用了 transform、animation 和 box-shadow 屬性來實現動畫效果。通過定義一個 pulse 動畫，我們可以讓選擇器逐漸變成一個更大的圓，在變大的同時也漸漸消失。

到這里，我們就成功地實現了一個簡單的 CSS3 地球選擇器。你可以嘗試添加更多的選擇器，來實現更豐富的交互效果。