如何使用CSS制作手风琴效果的实现步骤

<ul class="accordion">
  <li>
    <input type="checkbox" id="item1">
    <label for="item1">内容块1</label>
    <div class="content">
      <p>这里是内容块1的内容。</p>
    </div>
  </li>
  <li>
    <input type="checkbox" id="item2">
    <label for="item2">内容块2</label>
    <div class="content">
      <p>这里是内容块2的内容。</p>
    </div>
  </li>
  <li>
    <input type="checkbox" id="item3">
    <label for="item3">内容块3</label>
    <div class="content">
      <p>这里是内容块3的内容。</p>
    </div>
  </li>
</ul>

.accordion {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.accordion li {
  position: relative;
}

.accordion li label {
  display: block;
  padding: 10px;
  background-color: #f0f0f0;
  cursor: pointer;
}

.accordion li input[type=checkbox] {
  display: none;
}

.accordion li .content {
  max-height: 0;
  overflow: hidden;
  background-color: #ffffff;
  transition: max-height 0.3s ease-out;
}

.accordion li input[type=checkbox]:checked ~ .content {
  max-height: 500px; 
  transition: max-height 0.5s ease-in;
}

.accordion li label:hover {
  background-color: #e3e3e3;
  transition: background-color 0.3s ease-in-out;
}

.accordion li input[type=checkbox]:checked + label {
  background-color: #d3D3d3;
  transition: background-color 0.3s ease-in-out;
}