带有固定阴影的 CSS 下拉动画

Question

我想制作一个“冲压”动画，已经到了以下几点:

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>

阴影看起来不错，但我认为如果有一种方法会很酷，所以它一开始是静止的、大的和模糊的，但随着圆圈越来越近，它变得更加精致——就像有一个邮票将要击中/着陆的地方的轮廓(就像在视频游戏中一样)。

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

我想使用它的应用程序是 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>