Question

我对我的website选框的工作方式非常满意，它适用于除Safari之外的所有浏览器。我究竟做错了什么？有什么我可以做的，以便在Safari中播放相同的内容吗？

＆＃13;

.marquee {
  width: 260px;
  margin: 0 auto;
  overflow: hidden;
  whitespace: nowrap;
  fontsize: 20px;
  position: absolute;
  color: #fff;
  text-shadow: #000 1px 1px 0;
  font-family: Tahoma, Arial, sans-serif
}

@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
  }
}

＆＃13;

<p class="marquee">bla bla bla</p>

＆＃13;

Answer 1

您错过了代码的动画部分。另外，如果没有首先创建一个包装来隐藏溢出，我不确定转换是否会起作用。以下是使用text-indent代替的尝试。

.marquee {
  width: 260px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  position: absolute;
  color: #fff;
  text-shadow: #000 1px 1px 0;
  font-family: Tahoma, Arial, sans-serif;
  -webkit-animation: marquee 5s linear infinite;
}

@-webkit-keyframes marquee {
  0% {
    text-indent: 260px;
  }
  100% {
    text-indent: -260px;
  }
}

<p class="marquee">bla bla bla</p>

编辑：这是使用包装器的另一种方法。

.marquee {
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  color: #fff;
  text-shadow: #000 1px 1px 0;
  font-family: Tahoma, Arial, sans-serif;
  display:inline-block;
  
  width: 260px;
}

.marquee span {
  display:inline-block;
  min-width: 100%;
  -webkit-animation: marquee 3s linear infinite;
}

@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

<p class="marquee"><span>bla bla bla</span></p>

CSS marquee不适用于Safari

1 个答案: