包装CSS3滑块

Question

在这个小提琴中 ，我正在使用CSS3滑动文本（下面的示例）。 但是，我希望它可以环绕起来以有效实现股票行情。 尽管问题似乎涉及微观管理像素，以添加更多文本并创建清晰的过渡。

@-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:100%
      }
      to {
        margin-left:0%;
        width:100%;
      }
    }

忠告？

这是一个示例 ，但我想使用CSS。

Answer 1

在此处增加代码： SmoothTextFlow

     h1 {
      -webkit-animation-duration: 15s;
      -webkit-animation-name: slidein;
      -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: graysc;
}

@-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:100%
      }
      to {
        margin-left:0%;
        width:100%;
      }
    }

Answer 2

这是完成任务的一种方式： http : //jsfiddle.net/ytKV5/ 。 使用Chrome。 我不想为每个扩展创建代码。

请记住，在CSS中，您无法根据滚动文本的长度来调整幻灯片的速度。 文字越长，滚动速度越快。

HTML：

<div id = "wrapper">
    <h1>Scrolling text....scrolling...scrolling</h1>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

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

    100% {
        left: 100%;
        -webkit-transform: translateX(-150%);  
    }
}

#wrapper {
    width: 200px;
    height: 40px;
    outline: 1px solid #000;
    margin: 0 auto;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

#wrapper > h1 {
    white-space: nowrap;
    line-height: 40px;
    position: absolute;
    top: 0;
    -webkit-animation: scroll-text 15s linear infinite;
}