CSS 過渡是一種在元素屬性發(fā)生變化時(shí)，可以產(chǎn)生平滑過度效果的技術(shù)。它使過渡期間的變化更柔和，更加流暢。有時(shí)候，我們可以使用過渡來改變除目標(biāo)元素之外的其他元素。下面將演示如何改變其他元素的樣式。

button {
background-color: pink;
transition: background-color 0.5s ease;
}
button:hover {
background-color: lightblue;
}
p {
font-size: 18px;
transition: font-size 0.5s ease;
}
button:hover + p {
font-size: 24px;
}

在上面的代碼段中，我們定義了一個(gè)按鈕元素，在鼠標(biāo)懸停時(shí)背景顏色會(huì)從粉紅色變成淡藍(lán)色。我們還定義了一個(gè)段落元素，在按鈕懸停時(shí)，字體大小會(huì)從 18px 變成 24px。這是因?yàn)槲覀兪褂昧?“+” 選擇器，查詢?cè)诎粹o之后的段落元素。

過渡也可以通過動(dòng)態(tài)更改 CSS 變量的值來改變其他元素的樣式。下面的代碼演示了這個(gè)效果：

:root {
--main-color: lightgreen;
--secondary-color: white;
}
button {
background-color: var(--main-color);
transition: background-color 0.5s ease;
}
button:hover {
--main-color: lightblue;
--secondary-color: black;
}
h1 {
color: var(--secondary-color);
transition: color 0.5s ease;
}

在這個(gè)例子中，我們定義了兩個(gè) CSS 變量，一個(gè)主顏色和一個(gè)輔助顏色。我們檢測(cè)按鈕懸停時(shí)的事件，并改變主顏色和輔助顏色的值。然后，我們?cè)跇?biāo)題元素上使用了這些變量，使標(biāo)題的顏色根據(jù)新的顏色值發(fā)生變化。

通過這種方式，我們可以使用 CSS 過渡來控制多個(gè)元素的樣式，以便在交互過程中獲得動(dòng)態(tài)效果。