您可能已经注意到，我们在5 月时事通讯中对动画和互动进行了创意，希望通过在收件箱中提供一些惊喜和乐趣来增加参与度。还有奖金，很有趣！设计、编码和玩耍都很有趣。 Apple Mail 主要支持这种高级 CSS 动画，因此我们确保提供可在支持较少 CSS 动画的其他电子邮件客户端中运行的版本。以及不支持 CSS 动画的后备方案。 翻转卡片以发现另一侧的文字的动画 那么我们是怎么做到的呢？我很高兴你问。 构建动画 我们从构建最先进的版本开始：翻转卡版本。为 web 构建翻页卡片相对简单，不需要任何高级CSS 动。
画。但是，当然，这是电子邮件，因此我们必须做一些有趣的更改才能使其正常工作，因为并非所有内容都受支持。 首先，我们为卡片的正面和背面创建容器现在我们 哥斯达黎加 WhatsApp 号码 有了卡片，让我们确保它们的位置正确，也就是在隐藏卡片背面的情况下彼此叠放。 我们需要使用宽度和高度来声明卡片的大小以匹配图像的大小。然后我们将它应用到最外面的 <div> 上，这样我们就不必担心任何内部 div 的大小不同。我们还添加了透视属性，以便我们获得动画的 3-D 感觉。
来，我们添加一个阴影（用于趣味）和内容 div 的转换最后，我们添加了一些定位和可见性，以确保图像彼此重叠。相反，我们将通过将不透明度设置为 0 来隐藏背面卡片，然后在悬停时将背面卡片的不透明度转换为 为了使过渡顺利，我们将对正面卡做相反的事情。最后，我们将整个 CSS 块包装在媒体查询中，以针对 WebKit 客户端（主要是 Apple 客户端）并添加类以确保它在那里显示，但在非 WebKit 客户端中隐藏。样式块一起看起来像这样。