html - 带有变换的CSS折叠动画

Question

我有这个方 block :https://jsfiddle.net/34f93mL3/

如您所见，当您将鼠标悬停在它上面时，顶部会向下折叠，当它到达底部时，它会变成粉红色的圆点。

但是，我想要的是让它模仿实际的折叠 Action ，这意味着它不应该有圆点，直到它被“折叠”多一点。

这里是完整的代码，它只使用了 HTML 和 CSS:

body {
  background: white
}
#slow-container {
  top: 100px;
  left: 200px;
  height: 50px;
  position: absolute;
  width: 100px;
  background: lightblue;
}
#slow-container:before {
  top: -50px;
  height: 50px;
  position: absolute;
  width: 100px;
  background: lightblue;
}
#slow-container2 {
  top: -50px;
  height: 50px;
  position: absolute;
  width: 100px;
  background: lightblue;
}
.slow-parent1 {
  height: 0;
  overflow: hidden;
  background: lightgreen;
}
.slow-parent2 {
  background: white;
}
.slow-parent3 {
  height: 300px;
  background: red;
}
#slow-container2 {
  transition: all 1s linear;
  transform-origin: bottom center;
}
#slow-container:hover #slow-container2 {
  transform: rotateX(180deg);
  background-color: lightpink;
  background-image: radial-gradient(#fff 10%, transparent 10%), radial-gradient(#fff 10%, transparent 10%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

<div id="slow-container">
  <div id="slow-container2">
  </div>
  <div class="slow-parent1">
    <div class="slow-parent2">
      <div class="slow-parent3">
        stuff goes here later
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

只需从悬停样式代码中删除 #fff 10%, 从径向渐变