Question

所以我正在制作一封电子邮件，上面展示了一堆衬衫。由于标语是＆＃34;在它们消失之前得到它们，＆＃34;我被要求为每件衬衫制作动画，一个接一个地消失，直到他们好了，好了，走了。

我知道和/或发现的所有内容都只适用于悬停，我不想要。我希望它能自动启动。

所以我看起来并不完全懒惰，这里有一些jsfiddle的入门代码。一旦我看到一件衬衫是如何被编码的，我就可以明白其余的时间安排等等。非常感谢能够提供帮助的任何人！

注意：假装这与电子邮件无关 - 我已被要求探索它，即使它不起作用，我们决定只使用GIF动画。

<html>
   <head>
      <style type="text/css">
      </style>
   </head>
   <body>
      <img alt="shirt" src="https://s7.jcrew.com/is/image/jcrew/60763_WW8415?$pdp_fs418$" />
   </body>
</html>

Answer 1

电子邮件客户端不支持

:hover，CSS动画也不支持。也不支持JavaScript - 所以你可以在动画GIF中做到最好，即使在那里，也不能保证用户的邮件客户端会支持它。

请参阅：http://litmus.com/blog/a-guide-to-animated-gifs-in-email

https://www.campaignmonitor.com/css/

Answer 2

如果您的受众群体使用的是现代电子邮件客户端，则支持css3尝试使用它。 More

使用CSS3：JSFiddle

img {
    animation: Gone 5s 1;
    opacity: 0;
}

@keyframes Gone {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

否则请使用GIF动画。

Answer 3

不要使用javascript作为非基于Web的邮件客户端无法运行它（并且基于Web的邮件可能会阻止它）。使用动画gif图像，其中T恤在2s，4s，6s等后消失。

使用CSS无需悬停即可使图像消失

3 个答案: