javascript - 包装 CSS3 slider

Question

在此 fiddle 内，我正在使用 CSS3 来滑入文本(下面的示例)。但是，我希望它环绕以有效地实现自动收报机。虽然问题似乎涉及微观管理像素以添加更多文本并创建干净的过渡。

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

建议？

这是一个 example , 但我想使用 CSS。

Answer 1

这是完成它的一种方法: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;
}