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