Question

对于以下段落，我想在鼠标悬停时动画滚动span元素。它会向右滚动直到结束。

  <div class="one_line">
    <span>
        NoMagic framework doesn't try to put anything into the blackbox. We hope you read the core source code and try to get fully understanding before you start to using it. And we hope you forking our project and creating your own database helper function sets based on your need.

        Using NoMagic, you will turn the MySQL database into a schemaless solution, the schemaless database will save your time so that you don't need to spend to much time in planning database table structure.
    </span>
  </div>

我已经拥有的CSS

.one_line {
  line-height: 1.5em;
  height: 1.5em;
  position: relative;
  width: 600px;
  overflow-x: hidden;
  span {
    white-space: nowrap;
    height: 100%;
    display: inline-block;
    position: absolute;
    &:hover {
      animation-name: scroll;
      animation-duration: 6s;
    } 
  }
}

@keyframes scroll {
  50% {
    left: 100%;
  }
}

Answer 1

据我所知，使用CSS动画我们只能为整个标签本身设置动画，但不能为其中的内容设置动画（即），在这种情况下，我们可以跨页面维度移动整个范围，但不能移动其中的文本。所以我使用了更灵活的转换属性。

我有一个jsfiddle here来证明这一点。

我已更改的CSS动画代码：

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

希望这会有用。

动画内联元素滚动全宽

1 个答案: