CSS收縮展開代碼怎么寫

CSS收縮展開代碼是一種通過CSS樣式來實現(xiàn)元素收縮和展開效果的代碼，這種效果在網(wǎng)頁設(shè)計中非常常見，可以用于制作折疊菜單、彈出框等交互效果。

要實現(xiàn)CSS收縮展開效果，需要用到CSS中的transition和transform屬性。transition屬性用于設(shè)置元素的過渡效果，而transform屬性則用于對元素進行縮放、旋轉(zhuǎn)等操作。

下面是一個簡單的例子，展示如何實現(xiàn)一個折疊菜單的收縮展開效果：

HTML代碼：

<div class="menu-container">
  <div class="menu-item">菜單項1</div>
  <div class="menu-item">菜單項2</div>
  <div class="menu-item">菜單項3</div>
  <div class="menu-item">菜單項4</div>
  <div class="menu-item">菜單項5</div>
  <div class="menu-item">菜單項6</div>
  <div class="menu-item">菜單項7</div>
  <div class="menu-item">菜單項8</div>
  <div class="menu-item">菜單項9</div>
  <div class="menu-item">菜單項10</div>
  <div class="menu-item">菜單項11</div>
  <div class="menu-item">菜單項12</div>
  <div class="menu-item">菜單項13</div>
  <div class="menu-item">菜單項14</div>
  <div class="menu-item">菜單項15</div>
  <div class="menu-item">菜單項16</div>
  <div class="menu-item">菜單項17</div>
  <div class="menu-item">菜單項18</div>
  <div class="menu-item">菜單項19</div>
  <div class="menu-item">菜單項20</div>
  <div class="menu-item">菜單項21</div>
  <div class="menu-item">菜單項22</div>
  <div class="menu-item">菜單項23</div>
  <div class="menu-item">菜單項24</div>
  <div class="menu-item">菜單項25</div>
  <div class="menu-item">菜單項26</div>
  <div class="menu-item">菜單項27</div>
  <div class="menu-item">菜單項28</div>
  <div class="menu-item">菜單項29</div>
  <div class="menu-item">菜單項30</div>
  <div class="menu-item">菜單項31</div>
  <div class="menu-item">菜單項32</div>
  <div class="menu-item">菜單項33</div>
  <div class="menu-item">菜單項34</div>
  <div class="menu-item">菜單項35</div>
  <div class="menu-item">菜單項36</div>
  <div class="menu-item">菜單項37</div>
  <div class="menu-item">菜單項38</div>
  <div class="menu-item">菜單項39</div>
  <div class="menu-item">菜單項40</div>
  <div class="menu-item">菜單項41</div>
  <div class="menu-item">菜單項42</div>
  <div class="menu-item">菜單項43</div>
  <div class="menu-item">菜單項44</div>
  <div class="menu-item">菜單項45</div>
  <div class="menu-item">菜單項46</div>
  <div class="menu-item">菜單項47</div>
  <div class="menu-item">菜單項48</div>
  <div class="menu-item">菜單項49</div>
  <div class="menu-item">菜單項50</div>
  <button id="open" onclick="openMenu()">展開全部菜單項</button>
  <button id="close" onclick="closeMenu()">收縮全部菜單項</button>