个人中心
gpt4 book ai didi

css - :before/:after tag in inline css (workaround?)

转载 作者：太空宇宙 更新时间：2023-11-04 10:55:11 24 4
gpt4 key购买 nike

所以我正在尝试将动画 CSS 放入电子邮件签名中。我让它在 iOS/Mac 电子邮件客户端中工作，但 Gmail 和 Outlook 似乎阻止了部分代码。有没有人知道解决方法？

我现在在电子邮件中使用的代码:

    <!doctype HTML>
<html style="margin: 0; padding: 0;">
 <head style="margin: 0; padding: 0;">
  <style rel="stylesheet" style="margin: 0; padding: 0;" type="text/css">
* { margin: 0; padding: 0; }

.container {
background: #64B1EE;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}


.airplane {
position: absolute; 
left: 40%;
top: 10%;
z-index: 3;
-webkit-animation: plainfly 10s linear infinite;
-o-animation: plainfly 10s linear infinite;
animation: plainfly 10s linear infinite;
}
.airplane div {
background: #F9FBFC;
border-radius: 100%;
width: 60px;
height: 60px;
position: absolute;
z-index: 1;
}
div.head  {
top: 21px;
left: 83px;
width: 60px;
height: 25px;
border-radius: 100%;
}
div.body  {
top: 20px;
left: 0;
width: 130px;
height: 26px;
border-radius: 40% 30% 20% 50%;
z-index: 1
}
div.lwing {
top: 7px;
left: 60px;
height: 21px;
width: 30px;  
border-radius: 5px; 
z-index: 0 ;
-webkit-transform: skew(51deg, 0deg);
-ms-transform: skew(51deg, 0deg);
-o-transform: skew(51deg, 0deg);
transform: skew(51deg, 0deg);
}
div.rwing {
top: 34px;
left: 57px;
height: 27px; 
width: 35px;
border-radius: 5px;
z-index: 1; 
box-shadow: 0px 6px 4px rgba(0, 0, 0, 0.16);
-webkit-transform: skew(-49deg, 0deg);
-ms-transform: skew(-49deg, 0deg);
-o-transform: skew(-49deg, 0deg);
transform: skew(-49deg, 0deg);
}
div.tale  {
top: 15px;
left: 10px;
width: 16px;
height: 16px;
border-radius: 2px;
-webkit-transform: skew(35deg, -9deg);
-ms-transform: skew(35deg, -9deg);
-o-transform: skew(35deg, -9deg);
transform: skew(35deg, -9deg);
background: linear-gradient(0deg,#FFF, #BBDEFF);
}
div.window,
div.window:before,
div.window:after {
content: "";
top: 6px;
left: 48px;
width: 4px; 
height: 4px; 
border-radius: 30%;
background: #9AD0F5;
border: 1px solid #5093D1;
position: absolute;
}
div.window:before {
left: -12px;
top: -1px;
}
div.window:after {
left: 10px;
top: -1px;
}
div.window:nth-child(1){
left:81px
}
div.window:nth-child(2){
left:115px
}
div.window:nth-child(2):after {
border-top-right-radius: 8px;
width: 6px;
}


@-webkit-keyframes plainfly { 
0% {
  left: -10%; 
  -webkit-transform: scale(.4);
  -ms-transform: scale(.4);
  -o-transform: scale(.4);
  transform: scale(.4);
} 
50% {
  left: 110%; 
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
} 
51% {
  -webkit-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
100% {
  left: -10%; 
  -webkit-transform: scale(1.4) rotateY(180deg);
  -ms-transform: scale(1.4) rotateY(180deg);
  -o-transform: scale(1.4) rotateY(180deg);
  transform: scale(1.4) rotateY(180deg);
}
}
@-webkit-keyframes cloud   { 
0% { left: 15%; }
50% { left: 63%; } 
100% { left: 15%; }
}
@-webkit-keyframes cloud_a { 
0% { left: 62%; }
50% { left: 90%; } 
100% { left: 62%; }
}
@-webkit-keyframes cloud_b { 
0% { left: 50%; }
50% { left: 23%; } 
100% { left: 50%; }
}
@-webkit-keyframes cloud_c { 
0% { left: 37%; }
50% { left: 47%; } 
100% { left: 37%; }
}
@-webkit-keyframes cloud_d { 
0% { left: 25%; }
50% { left: 65%; } 
100% { left: 25%; }
}
</style>
 </head>
 <body style="margin: 0; padding: 0;">
  <div class="container" style="background: #64B1EE; height: 100%; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 100%;"><airplane class="airplane" style="animation: plainfly 10s linear infinite; left: 40%; margin: 0; padding: 0; position: absolute; top: 10%; z-index: 3;"><div class="head" style="background: #F9FBFC; border-radius: 100%; height: 25px; left: 83px; margin: 0; padding: 0; position: absolute; top: 21px; width: 60px; z-index: 1;">
    </div>
    <div class="body" style="background: #F9FBFC; border-radius: 40% 30% 20% 50%; height: 26px; left: 0; margin: 0; padding: 0; position: absolute; top: 20px; width: 130px; z-index: 1;">
     <div class="window" style="background: #9AD0F5; border: 1px solid #5093D1; border-radius: 30%; content: ""; height: 4px; left: 48px; margin: 0; padding: 0; position: absolute; top: 6px; width: 4px; z-index: 1;">
     </div>
     <div class="window" style="background: #9AD0F5; border: 1px solid #5093D1; border-radius: 30%; content: ""; height: 4px; left: 48px; margin: 0; padding: 0; position: absolute; top: 6px; width: 4px; z-index: 1;">
     </div>
     <div class="window" style="background: #9AD0F5; border: 1px solid #5093D1; border-radius: 30%; content: ""; height: 4px; left: 48px; margin: 0; padding: 0; position: absolute; top: 6px; width: 4px; z-index: 1;">
     </div>
    </div>
    <div class="lwing" style="background: #F9FBFC; border-radius: 5px; height: 21px; left: 60px; margin: 0; padding: 0; position: absolute; top: 7px; transform: skew(51deg, 0deg); width: 30px; z-index: 0;">
    </div>
    <div class="rwing" style="background: #F9FBFC; border-radius: 5px; box-shadow: 0px 6px 4px rgba(0, 0, 0, 0.16); height: 27px; left: 57px; margin: 0; padding: 0; position: absolute; top: 34px; transform: skew(-49deg, 0deg); width: 35px; z-index: 1;">
    </div>
    <div class="tale" style="background: linear-gradient(0deg,#FFF, #BBDEFF); border-radius: 2px; height: 16px; left: 10px; margin: 0; padding: 0; position: absolute; top: 15px; transform: skew(35deg, -9deg); width: 16px; z-index: 1;">
    </div></airplane></div>
 </body>
</html>

Jsfiddle 使它更容易:https://jsfiddle.net/rvrvbtL9/

任何帮助将不胜感激!提前致谢。

最佳答案

您遇到的问题是由电子邮件客户端删除 <style> 中的所有内容造成的标签。电子邮件客户端处理 HTML 电子邮件的方式各不相同，大多数时候您将不得不使用有限的内联样式和基于表格的布局以获得最佳兼容性。

This是一个很好的资源。

关于css - :before/:after tag in inline css (workaround?)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34682827/

24 4 0
文章推荐： python - 编写将分钟整数转换为格式为 "X hour(s) Y minute(s)"的字符串的函数的最佳方法是什么？
文章推荐： java - 尝试使用 actionListener 将字符串颠倒过来
文章推荐： linux - http ://ftp. gnu.org/gnu/gdb/gdb-7.9.tar.gz 中缺少 gdbserver 7.9
文章推荐： python - 横向排列十六进制
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com