0

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%;
  }
}
4

1 に答える 1

1

私の知る限り、CSS animate を使用して、タグ自体全体のみをアニメーション化できますが、そのコンテンツはアニメーション化できません (つまり、この場合、ページ全体でスパン全体を移動できますが、タグ内のテキストは移動できません)。そこで、より柔軟な transform プロパティを使用して作成しました。

これを示すために、ここにjsfiddle があります。

私が変更したCSS Animateコード：

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

これが役立つことを願っています。

于 2013-08-02T14:59:00.450 に答える