仅使用内联css和@keyframes的选框动画

bkhjykvo 于 2023-03-25 发布在其他

关注(0)|答案(3)|浏览(152)

我使用的电子邮件平台（Listrak）只允许在电子邮件设计中使用内联CSS。
我用内联css做了一个简单的滚动字幕。
但是现在我被困在哪里把@keyframes css？
我不能使用标签。所有东西都必须是内联css。

@keyframes marquee {
  0% {
    left: 0px;
  }
  100% {
    left: -336px;
  }
}

<div style="display:flex;
  width:600px;
  height: 50px;
  overflow: hidden;
  line-height: auto;
  background-color:#1892a0;">

  <div style="display:flex;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    top: 10px;
    left: 100%;
    justify-content:round;
    font-family: 'TriviaSlabBook', Arial, Helvetica, sans-serif;
    font-size:32px;
    font-weight:bold;
    color:white;
    animation: marquee 3s linear infinite;">

    <span>SPRING BOGO SALE! &nbsp;</span>
    <span>SPRING BOGO SALE! &nbsp;</span>
    <span>SPRING BOGO SALE! &nbsp;</span>
    <span>SPRING BOGO SALE! &nbsp;</span>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75792190/html-only-marquee-animation-using-inline-css-only-and-keyframes

3条答案

按热度按时间

i5desfxk1#

与已弃用的marquee标签相同：

<div style="display:flex;
  width:600px;
  height: 50px;
  overflow: hidden;
  line-height: auto;
  background-color:#1892a0;">

  <marquee style="display:flex;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    top: 10px;
    left: 0%;
    justify-content:round;
    font-family: 'TriviaSlabBook', Arial, Helvetica, sans-serif;
    font-size:32px;
    font-weight:bold;
    color:white;">

    <span>SPRING BOGO SALE! &nbsp;</span>
    <span>SPRING BOGO SALE! &nbsp;</span>
    <span>SPRING BOGO SALE! &nbsp;</span>
    <span>SPRING BOGO SALE! &nbsp;</span>
  </marquee>
</div>

赞(0）回复(0）举报 2023-03-25

e0uiprwp2#

我认为电子邮件客户端不支持@keyframes css标签。除非有人有解决办法，我会考虑这个问题关闭。

赞(0）回复(0）举报 2023-03-25

lh80um4z3#

HTML中有一个标签，所以即使你使用它，结果也是一样的，那么你就会给予它一个设计

赞(0）回复(0）举报 2023-03-25