css3做一個滾動條

先上效果圖：

html代碼很簡單：

<div>
    <span class="wrap">
        <span class="wrap">週一吳瓊瓊不想上班；週二吳瓊瓊不想上班；週三吳瓊瓊不想上班；週四吳瓊瓊不想上班；週五吳瓊瓊不想上班；</span>
    </span>
  </div>

css:

  @keyframes anim-CarouselLeft {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  @-webkit-keyframes anim-CarouselLeft {
    0% {
      -webkit-transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-50%);
    }
  }

  div {
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 381px;
    margin-top: 231px;
  }

  .wrap {
    display: inline-block;
    -webkit-transform: transitionZ(0);
    transform: transitionZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    -webkit-animation: anim-CarouselLeft 50s linear 0s infinite;
    animation: anim-CarouselLeft 10s linear 0s infinite;
  }

之前也有寫過關於css3的一些屬性的筆記：
http://blog.csdn.net/amberwu/article/details/72819687