如何在CSS中制作这样的落幕效果

Question

你如何产生这样的效果。我是 CSS动画的新手，我实际上并不知道从哪里开始。我现在这样做，它是一个悬停，所以你可能需要一个过渡来触发效果。我也知道照片应该有静态位置，蓝色div应该有相对位置。从现在开始，我不知道从哪里开始。谁可以帮助我？谢谢！

Answer 1

我希望这会对你有所帮助。

.img_wrap {
  position: relative;
  width: 300px;
  height: 350px;
  overflow: hidden;
}
.img_wrap img {
  width: 100%;
}
.img_details {
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
}
.left {
  float: left;
}
.right {
  float: right;
}
@keyframes elastic {
  0% {
    transform: rotate(90deg);
    opacity: 0;
  }
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}
.overlay {    
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: lightblue;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.img_wrap:hover .overlay {
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  transform-origin: top left;
  transform-style: preserve-3D;
  transition: transform 1.5s linear;
  animation: elastic 1.5s forwards;
}

<div class="img_wrap">
<img src="https://target.scene7.com/is/image/Target/52597142?wid=520&hei=520&fmt=pjpeg" />
<div class="img_details">
<span class="left">Santa toy</span>
<span class="right">3$</span>
</div>
<div class="overlay">
<span>Sold out</span>
</div>
</div>

Answer 2

你应该真的尝试学习和调整它并尝试自己想出来但是无论如何就是这样。希望，这有帮助。

#a,
#b {
  width: 300px;
  height: 300px;
  background: red;
}

#b {
  opacity: 0;
  background: blue;
  transform: rotate(100deg);
}

#a:hover #b {
  transform-origin: top left;
  transform-style: preserve-3D;
  transition: transform 2s linear;
  animation: mymove 2s forwards;
}

@keyframes mymove {
  0% {
    transform: rotate(90deg);
    opacity: 0;
  }
  60% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

<div id="a">
  <div id="b"></div>
</div>