CSS折叠动画与变换

Question

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

正如你所看到的，当你将鼠标悬停在它上面时，顶部会向下折叠，当它到达底部时，它会变成一个polkadotted粉红色。

然而，我想要发生的是它模仿一个实际的折叠动作，这意味着它不应该有polkadots直到它“折叠”一点。

以下是完整代码，仅使用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

只需在悬停样式代码<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="clonedInput1" class="clonedInput"> <div> <label for="txtCategory" class="">Learning category 1 <span class="requiredField">*</span></label> <select class="" name="txtCategory[]" id="category1"> <option value="">Please select</option> </select> </div> <div class="actions"> <button class="remove">Remove</button> </div> </div> <button class="clone">Clone</button>中移除径向渐变

即可

Answer 2

使用 CSS3 属性perspective来感受折叠效果。

参考文献：https://css-tricks.com/almanac/properties/p/perspective/

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: perspective(200px) 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>