包裝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;
}