今天我們來介紹一種常見的CSS效果——衛(wèi)星按鈕。這種效果常見于展示頁或個(gè)人網(wǎng)站，能夠?yàn)轫撁嬖黾右恍﹦?dòng)態(tài)和美感。下面我們就一起來看一看如何實(shí)現(xiàn)這種效果。 首先，我們需要為頁面創(chuàng)建一個(gè)按鈕。代碼如下：

<button class="btn">
<i class="icon"></i>按鈕
</button>

接著，我們需要使用CSS來對按鈕進(jìn)行樣式設(shè)置。需要注意的是，我們需要利用 ::after 偽元素來創(chuàng)建衛(wèi)星按鈕。代碼如下：

.btn {
position: relative;
width: 80px;
height: 50px;
background-color: #009688;
color: #fff;
font-size: 16px;
font-weight: 600;
border-radius: 25px;
border: none;
cursor: pointer;
}
.btn::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background-color: #f1c40f;
border-radius: 5px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

上面的代碼中，我們給按鈕定義了一些基本的樣式，這些樣式可以根據(jù)需要進(jìn)行改變。::after 偽元素中則定義了衛(wèi)星按鈕的樣式，包括大小、顏色、位置等等。 最后，我們需要增加一些動(dòng)畫效果來讓衛(wèi)星按鈕動(dòng)起來。代碼如下：

.btn:hover::after {
animation: move 2s infinite linear;
}
@keyframes move {
to {transform: rotate(360deg) translateX(50px) rotate(-360deg);}
}

這段代碼會(huì)使得鼠標(biāo)懸停在按鈕上時(shí)，衛(wèi)星按鈕會(huì)圍繞按鈕一直旋轉(zhuǎn)。我們通過 CSS 的 @keyframes 規(guī)則和 transform 屬性來實(shí)現(xiàn)這種動(dòng)畫效果。 到此為止，我們就成功地創(chuàng)建了一個(gè)衛(wèi)星按鈕效果。在實(shí)際應(yīng)用中，我們還可以根據(jù)需要進(jìn)行更多的樣式和動(dòng)畫設(shè)置，以達(dá)到更好的效果展示。