如何将gif转换为阴影？

Question

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

我想制作它的shadow : Codeine_3d_transparent-shadow.gif，使用一些html和css，我会把彩色动画放在下面。

如何快速完成？

截至目前，我这样做，但它不是影子XD：

Answer 1

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

另请注意，所有浏览器都不支持100％的过滤器。

＆＃13;

＆＃13;

.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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;