如何将gif转换为阴影？

Question

我有an elegant 3D animation of a molecule Codeine_3d_transparent.gif。

我希望制作 itsshadow : Codeine_3d_transparent-shadow.gif，使用一些 html 和 css 我将在彩色动画下面放上。

我怎样才能快速做到？

到目前为止，我这样做了，但它不是影子 XD：

Answer 1

说实话，这可能会损害某些设备的 AF 性能（请原谅我）——尤其是 GIF 上的这么多过滤器。不过过滤器应该是 GPU 加速的。

另请注意，并非所有浏览器都 100% 支持过滤器。

.animationHere,.animationHere:after{
      position:relative;
      width:200px;
      height:200px;
      display:inline-block;
      background:url(https://upload.wikimedia.org/wikipedia/commons/3/3e/Codeine_3d_transparent.gif);
      background-size:100% 100%;
    }
.animationHere:after{
      position:absolute;
      top:3px;
      left:3px;
      content:"";
      z-index:-1;
      filter: brightness(0) blur(1px);
      opacity: .5;
    }
.animationHere.next:after{
      position:absolute;
      top:30px;
      left:0;
      filter: none;
    }

<div class="animationHere"></div>
<div class="animationHere next"></div>