带有固定阴影的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>

阴影看起来不错，但我认为如果有一种制造方法，这样一来会很酷，它一开始是静止的，又大又模糊的，但是随着圆的靠近，它会变得更加精致-就像有一个剪影邮票将要击中/着陆的位置（例如在视频游戏中）。

一个人如何设法实现这一目标？就此而言，好的UX是吗？

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