如何将gif转换为影子？

我有an elegant 3D animation of a molecule Codeine_3d_transparent.gif。如何将gif转换为影子？

我希望生产其shadow : Codeine_3d_transparent-shadow.gif，其中使用一些HTML和CSS我会把娄丰富多彩的动画。

我该如何快速做到这一点？

截至现在我做到这一点，但它不是一个影子XD：

2017-03-01 Hugolpz

如果-1的问题，请给出一个提示（评论），这样我就可以学习和提高。 – Hugolpz

你能指定你的意思吗？影子？ - 像边框，阴影，外部发光到阿尔法0 ...这不是很清楚（至少对我来说） - 我的意思是默认情况下是不可能的，但如果你能说出你的想法，那里可能是一种用语言来创造这种效果的方式。顺便说一句，如果你想要平滑过渡颜色chaning边界，为什么不使用上述过渡？ –

我假设你指的是物体下的阴影，就好像阴影在平坦的表面上一样。我能想到的唯一方法是解构GIF，为每一帧添加阴影并重新构建它。但我不知道你如何能够为每个位置制作精确的阴影形状。 – Bonzo

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

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

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

来源

2017-03-01 14:48:32

谢谢，就是这样！：D 哪个部分将图像变成灰色？ – Hugolpz

@Hugolpz它的亮度（0） - 实际上它变成了黑色。不透明度.7（或.2）将它变成透明的 - 所以它本身不是灰色的，但透明的黑色 –

@Hugoplz可以再现您下一张图片中的内容：https：//jsfiddle.net/a130bhd7/5/ –

如何将gif转换为影子？

回答

相关问题