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