label {
  background: #f00;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  transition: all .5s;
  overflow: hidden;
}

input:checked+label {
  width: 100%;
  height: 10000%;
  top: 0;
  margin-top: 0;
  left: 0;
  margin-left: 0;
  border-radius: 0;
  background: #0f0;
  overflow: hidden;
}

input {
  visibility: hidden;
  position: absolute;
  overflow: hidden;
}

<input id="hidden-checkbox" type="checkbox"></input>
<label for="hidden-checkbox"></label>

我會(huì)使用剪輯路徑和方框陰影:

label {
  position: absolute;
  inset: 0;
  width: 100px;
  aspect-ratio: 1;
  margin: auto;
  background: #f00;
  box-shadow: 0 0 0 100vmax #f00; /* very big box-shadow here */
  clip-path: circle(50%); /* fit the element size */
  transition: all .5s;
}

input:checked + label {
  clip-path: circle(100vmax); /* make the circle bigger */
}

input {
  visibility: hidden;
  position: absolute;
  overflow: hidden;
}

<input id="hidden-checkbox" type="checkbox"></input>
<label for="hidden-checkbox"></label>