1

我已经用纯 css 实现了一个自动收报机，有一个小问题我无法纠正。

我希望代码是连续的，没有任何间隙。即在“item 2”滚动结束后，“item 1”应该立即出现。

目前，如果您在小提琴中注意到，在滚动的最后一项之后有很多空白空间。我需要第一个项目立即出现在选框中的最后一个项目之后。

    <style>

    .nochng {color:#333}
    .upchng {color:#00b300}
    .dwnchng{color:#cc0000}

    @-webkit-keyframes ticker {
    0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
    }
    100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    }
    }
    @keyframes ticker {
    0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
    }
    100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    }
    }
    .ticker-wrap {
    width: 100%;
    overflow: hidden;
    padding-left: 100%;
    }

    .ticker {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: ticker;
    animation-name: ticker;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    }

    .ticker-wrap:hover .ticker {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
    }

    .ticker__item {
    display: inline-block;padding: 0 0.5rem;text-transform: uppercase;}
    .italic {font-style:italic;}
    </style>
    <div class="ticker-wrap">
    <div class="ticker">
    <div class="ticker__item"><span>Item1</span><span class="dwnchng"> Red <span class="italic">Color </span>&nbsp;<small>(inserted)</small>  </span></div>
    <div class="ticker__item"><span>Item2</span><span class="upchng"> Green <span class="italic">Color </span>&nbsp;<small>(inserted)</small>  </span></div>
    </div>

小提琴

4

0 回答 0