CSS 带有固定阴影的拖放动画

Question

我想制作一个 "stamping" 动画，已经到了以下几点：

div {
  height: 75px;
  width: 75px;
  background-color: brown;
  border: 4px dashed black;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 40px;
  overflow: hidden;
  animation: drop 3s forwards;
}

@keyframes drop {
  from {
    opacity: .25;
    transform-origin: 50% 50%;
    transform: rotate(25deg) scale(5) translate(-40px, 70px);
    transition: all ease-in;
    filter: drop-shadow(-4px -20px 4px black);
  }
  to {
    opacity: .8;
    transform: rotate(-15deg) scale(1);
    filter: drop-shadow(0 4px 4px black);
  }
}

<div></div>

阴影看起来还不错，但我认为如果有一种方法会很酷，所以它一开始是静止的、大的和模糊的，但随着圆圈越来越近，它变得更加精致-喜欢有邮票去向的轮廓hit/land（就像在电子游戏中一样）。

如何才能做到这一点？就此而言，这是好的用户体验吗？

我想使用它的应用程序在 Angular 中，因此使用 Angular 的动画（或普通 javascript）的解决方案也很好。

Answer 1

这就是你想要的吗？只需将阴影偏移设置为您定义的翻译：-40px, 70px

div {
  height: 75px;
  width: 75px;
  background-color: brown;
  border: 4px dashed black;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  top: 40px;
  overflow: hidden;
  animation: drop 3s forwards;
}

@keyframes drop {
  from {
    opacity: .25;
    transform-origin: 50% 50%;
    transform: rotate(25deg) scale(5) translate(-40px, 70px);
    transition: all ease-in;
    
    filter: drop-shadow(40px -70px 20px black);
  }
  to {
    opacity: .8;
    transform: rotate(-15deg) scale(1);
    filter: drop-shadow(0 4px 4px black);
    
  }
}

<div></div>

CSS 带有固定阴影的拖放动画

CSS drop animation with stationary shadow

css

animation

css-animations

shadow

angular-animations