如何将gif转换为阴影？

Question

我有一个分子Codeine_3d_transparent.gif的精美3D动画 。

我希望产生它的shadow : Codeine_3d_transparent-shadow.gif ，我将使用一些html和css将其放在彩色动画下面。

我该如何快速完成？

到目前为止，我已经做到了，但这还不是影子XD：

Answer 1

老实说，这可能会损害某些设备的性能自动对焦（请原谅）-特别是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>