css3 跑马灯首尾相接效果不限制字体长短

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .scroll-area {
      position: relative;
      height: 40px;
      border: 0px solid #ccc;
      width: 100px;
      overflow: hidden;
    }

    .scroll {
      position: absolute;
      line-height: 40px;
      left: 100%;
      top: 0;
      white-space: nowrap;
      -webkit-animation: todayScroll 4s linear infinite;
      animation: todayScroll 4s linear infinite;
    }

    .today-scroll-content {
      margin-right: 3em;
    }

    @keyframes todayScroll {
      0% {
        transform: translate(-50%);
      }

      100% {
        transform: translate(-100%);
      }
    }
  </style>
</head>
<body>
<div class="scroll-area">
  <div class="scroll">
      <span class="today-scroll-content">
         的英文这一个跑马灯
        </span>
        <span class="today-scroll-content">
          的英文这一个跑马灯
        </span>
  </div>


</div>
</body>
</html>

原文链接

他的代码不对，效果和代码不匹配，查看其源码，如上；

css3 跑马灯 首尾相接效果 不限制字体长短

悦读

css3 跑马灯首尾相接效果不限制字体长短