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


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <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>

原文链接

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

你可能感兴趣的:(工作中的零碎知识)