CSS 选取框在 Safari 上不起作用

Question

我对选取框在我的 website 上的工作方式非常满意，它适用于除 Safari 之外的所有浏览器。我究竟做错了什么？为了在 Safari 中也能玩同样的游戏，我能做些什么吗？

.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);
  }
}

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

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 选取框在 Safari 上不起作用

CSS marquee doesn't work on Safari

css

keyframe

css-animations