CSS展開和收縮是Web開發(fā)中常見的交互效果，通常用于可折疊的菜單、按鈕或段落，要實現(xiàn)這一效果，我們可以使用CSS中的transition和transform屬性，下面是一個簡單的示例，展示了一個可折疊的段落：

<div class="collapsible">
  <p>這是一段可折疊的文本，點擊展開或收縮按鈕可以顯示或隱藏這段文本。</p>
  <button class="toggle-button">點擊展開/收縮</button>
</div>

在CSS中，我們可以使用transition屬性來定義展開和收縮過程中的過渡效果，如漸變、滑動等。transform屬性可以用來控制元素的顯示和隱藏，以下是一個簡單的CSS樣式示例：

.collapsible {
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
  overflow: hidden;
}
.collapsible.expanded {
  max-height: 1000px; /* 可以根據需要調整 */
}
.toggle-button {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f5f5f5;
  cursor: pointer;
}

在這個示例中，我們給.collapsible元素添加了一個max-height屬性，并設置了過渡效果，當.collapsible元素添加.expanded類時，其***大高度會發(fā)生變化，從而實現(xiàn)展開和收縮的效果，我們還給.toggle-button元素添加了一些樣式，使其成為一個可以點擊的按鈕。

在JavaScript中，我們可以編寫一個簡單的函數(shù)來控制.collapsible元素的展開和收縮：

function toggleCollapsible() {
  var collapsible = document.querySelector('.collapsible');
  if (collapsible.classList.contains('expanded')) {
    collapsible.classList.remove('expanded');
  } else {
    collapsible.classList.add('expanded');
  }
}

我們需要將這個函數(shù)綁定到.toggle-button元素的點擊事件上：

var toggleButton = document.querySelector('.toggle-button');
toggleButton.addEventListener('click', toggleCollapsible);

當你點擊.toggle-button按鈕時，.collapsible元素就會展開或收縮，并伴隨著過渡效果，你可以根據需要調整CSS樣式和JavaScript代碼來實現(xiàn)不同的效果。