html - 鼠标悬停无法滚动溢出数据

Question

一旦它到达终点，我需要停止转换，这意味着 li 22。但它再次出现在第一位。

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
      }

      li {
        float: left;
      }

      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      li a:hover {
        background-color: #111;
      }

      .textBox {
        width: 80%;

        white-space: nowrap;
        overflow:hidden !important;

      }
      
      .scroll{
        display:flex;
      }
     
     
        .textBox {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
     
      .textBox:hover .scroll {
                     position: absolute;
        
            -moz-animation: scroll-left 2s linear;
            -webkit-animation: scroll-left 2s linear;
            animation: scroll-left 2s linear;

      }
      
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }

    <div class="textBox">
<ul class="scroll">
  <li><a class="active" href="#home">0Home</a></li>
  <li><a href="#news">1News</a></li>
  <li><a href="#contact">2Contact</a></li>
  <li><a href="#about">3About</a></li>
  <li><a href="#news">4News</a></li>
  <li><a href="#contact">5Contact</a></li>
  <li><a href="#about">6About</a></li>
  <li><a href="#news">7News</a></li>
  <li><a href="#contact">8Contact</a></li>
  <li><a href="#about">9About</a></li>
  <li><a href="#news">10News</a></li>
  <li><a href="#contact">11Contact</a></li>
  <li><a href="#about">12About</a></li>
  <li><a href="#news">13News</a></li>
  <li><a href="#contact">14Contact</a></li>
  <li><a href="#about">15About</a></li>
  <li><a href="#news">16News</a></li>
  <li><a href="#contact">17Contact</a></li>
  <li><a href="#about">18About</a></li>
  <li><a href="#news">19News</a></li>
  <li><a href="#contact">20Contact</a></li>
  <li><a href="#about">22About</a></li>
</ul>
</div>

我想将最后一个 li 滚动到菜单的末尾。我试图滚动鼠标，但无法滚动溢出数据。我需要在鼠标悬停时滚动到最后一个 li。但无法滚动。你能帮我解决这个问题吗？

标签： htmlcss

Answer 1

以防万一，如果您仍在搜索它和来源：滚动文本

 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
      }

      li {
        float: left;
      }

      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      li a:hover {
        background-color: #111;
      }

      .textBox {
        width: 80%;
        white-space: nowrap;
        overflow:hidden !important;

      }
      
      .scroll{
        display:flex;
      }
     
     
        .textBox {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
     
      .textBox:hover .scroll {
              position: absolute;        
            -moz-animation: scroll-left 5s linear;
            -webkit-animation: scroll-left 5s linear;
            animation: scroll-left 5s linear;
           transform:translateX(-95%);

      }      
      
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }

    <div class="textBox">
<ul class="scroll">
  <li><a class="active" href="#home">0Home</a></li>
  <li><a href="#news">1News</a></li>
  <li><a href="#contact">2Contact</a></li>
  <li><a href="#about">3About</a></li>
  <li><a href="#news">4News</a></li>
  <li><a href="#contact">5Contact</a></li>
  <li><a href="#about">6About</a></li>
  <li><a href="#news">7News</a></li>
  <li><a href="#contact">8Contact</a></li>
  <li><a href="#about">9About</a></li>
  <li><a href="#news">10News</a></li>
  <li><a href="#contact">11Contact</a></li>
  <li><a href="#about">12About</a></li>
  <li><a href="#news">13News</a></li>
  <li><a href="#contact">14Contact</a></li>
  <li><a href="#about">15About</a></li>
  <li><a href="#news">16News</a></li>
  <li><a href="#contact">17Contact</a></li>
  <li><a href="#about">18About</a></li>
  <li><a href="#news">19News</a></li>
  <li><a href="#contact">20Contact</a></li>
  <li><a href="#about">22About</a></li>
</ul>
</div>