如何将gif转换为阴影？

Posted 2023-03-25

【中文标题】如何将gif转换为阴影？

【英文标题】：How to convert a gif into a shadow?

【发布时间】：2017-07-20 18:27:21

【问题描述】：

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

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

我怎样才能快速做到？

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

【问题讨论】：

如果您的问题是-1，请给出提示（评论），以便我学习和改进。

您能具体说明shadow 的含义吗？ - 像边框，阴影，外发光到 alpha 0 ......这不是很清楚（至少对我来说） - 我的意思是默认情况下这是不可能的，但如果你能说出你的想法，那里可能是一种表达和创造这种效果的方式。顺便说一句，如果你想要平滑过渡的颜色变化边框，为什么不使用上述过渡？

我假设您的意思是物体下方的阴影，就好像阴影在平面上一样。我能想到的唯一方法是解构 gif 将阴影添加到每一帧并再次重建它。但我不知道如何为每个位置制作准确的阴影形状。

@AdamK。 : 相同的形状，深色，下方。

@Hugolpz 我很高兴为您的帖子投票并引起人们的注意。这是一个非常有趣的想法，我从未想到过 - 仍然很高兴找到一些东西来保持“齿轮”转动；）

【参考方案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>

【讨论】：

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

@Hugolpz 是亮度 (0) - 实际上将其变为黑色。不透明度 .7（或 .2）使其透明 - 所以它本身不是灰色，而是透明的黑色

@Hugoplz 在您的下一张图片中重现类似内容：jsfiddle.net/a130bhd7/5