css文字不停的怎么办？

Question

我想做一个不断移动的文字。我看过一个例子，我很喜欢它，但我试图修改它，但它坏了。现在旋转通过两个不同平面但不连续的文本被隐藏但是句子的延续没有出现。

举个例子，就好像一列6节车皮的火车绕着一圈，但在某些路段只出现了3、4节车皮你可以看到这个例子。这个想法是文本不会停止旋转，而是以更真实和连续的方式，现在句子被打破了

如何纠正这个问题，使句子看起来总是完整的？

必须怎么做才能让文字不停歇，句子永远连贯？

我试过增加planes的size，但是不行，反正句子是断的谢谢

html,
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: navajowhite;
}

.box {
  display: flex;
}

.box .inner {
  width: 600px;
  height: 300px;
  line-height: 300px;
  font-size: 6em;
  font-family: sans-serif;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

.box .inner:first-child {
  background-color: indianred;
  color: darkred;
  transform-origin: right;
  transform: perspective(100px) rotateY(-15deg);
}

.box .inner:last-child {
  background-color: lightcoral;
  color: antiquewhite;
  transform-origin: left;
  transform: perspective(100px) rotateY(15deg);
}

.box .inner span {
  position: absolute;
  animation: marquee 5s linear infinite;
}

.box .inner:first-child span {
  animation-delay: 3.5s;
  left: -100%;
}

@keyframes marquee {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>texto en 3D</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div class="box">
    <div class="inner">
      <span>welcome to my restaurant</span>
    </div>
    <div class="inner">
      <span>welcome to my restaurant</span>
    </div>
  </div>
</body>

</html>

我修改样式文件没有成功

html,
body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: navajowhite;
}

.box {
    display: flex;
}

.box .inner {
    width: 600px;
    height: 300px;
    line-height: 300px;
    font-size: 6em;
    font-family: sans-serif;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
}

.box .inner:first-child {
    background-color: indianred;
    color: darkred;
    transform-origin: right;
    transform: perspective(100px) rotateY(-15deg);
}

.box .inner:last-child {
    background-color: lightcoral;
    color: antiquewhite;
    transform-origin: left;
    transform: perspective(100px) rotateY(15deg);
}

.box .inner span {
    position: absolute;
    animation: marquee 5s linear infinite;
}

.box .inner:first-child span {
    animation-delay: 3.5s;
    left: -100%;
}

@keyframes marquee {
    from {
        left: 100%;
    }

    to {
        left: -100%;
    }
}

css文字不停的怎么办？

问题描述投票：0回答：0

最新问题

css文字不停的怎么办？

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0