Question

我在http://freshinbox.com/blog/ambient-animations-in-email-snow-and-stars/找到了这段代码并且喜欢这个效果。虽然当我把它放入我的电子邮件时，它会在表格之间创建一个巨大的空白区域。

如何正确插入电子邮件？我是否需要将div标签放在某个位置？

<style>
@media screen and (-webkit-min-device-pixel-ratio: 0) {
 .animcontainer{
  position:relative;
  width:100%;
  height:200px;
  overflow:hidden;
  background-color:#007FFF;
 }
 .snow{
  border-radius:9px;
  height:18px;
  width:18px;
  position:absolute;
  top:-20px;
  background-color:#ffffff;
 }
 .snow1{
  -webkit-animation: snowanim1 5s linear 0s infinite; 
 }
 .snow2{
  -webkit-animation: snowanim2 6s linear 1s infinite; 
 }
 .snow3{
  -webkit-animation: snowanim3 7s linear 2s infinite; 
 }
 @-webkit-keyframes snowanim1
 {
  0% { top:0%;left:50%; }        
  100% { top:100%;left:65%; }
 }
 @-webkit-keyframes snowanim2
 {
  0% { top:0%;left:30%; }        
  100% { top:100%;left:25%; }
 }
 @-webkit-keyframes snowanim3
 {
  0% { top:0%;left:70%; }        
  100% { top:100%;left:60%; }
 }
}
</style>

<div class="animcontainer">
  <div class="snow snow1"></div>
  <div class="snow snow2"></div>
  <div class="snow snow3"></div>
</div>

Answer 1

我最终弄明白了，div标签的位置没有区别。造成这些问题的原因是这些问题。

有一个我无法解决的问题，那就是动画没有到达页面的底部，尽管在动画中是“顶部：100％”，所以我不得不做2000％实际到达底部看起来不是一个优雅的解决方案。

如何在电子邮件中实现此降雪代码？

1 个答案: