Question

首先：我不太熟悉CSS。我设法使CSS Newsticker正常工作（来源：Pure CSS ticker without absolute positioning）。但不幸的是，它无法按预期工作。

如何摆脱动画完成和重新开始之间的延迟？
在执行完整的行情自动收录器包装之前，如何避免行情自动收录器文本消失？编辑：见这里https://jsfiddle.net/uLvzrtg0/-它似乎发生在固定宽度上？

使动画时间变量取决于输入文本长度的最佳方法是什么？（我已经尝试过Javascript，并且效果很好-IE中除外）

<script>
var vSpeed = (5+params[0].length*.18)+"s";
    if(params[0]=="")
    {
      document.getElementById("tickerwrap").style.display="none";
    }else{
    document.getElementById("ticker").style["-webkit-animation-duration"] = vSpeed;  
    document.getElementById("ticker").style["animation-duration"] = vSpeed;  
    }

JSFiddle，例如：https://jsfiddle.net/08921sek/

<p>Content before ticker</p>
  <div id="tickerwrap">
    <div id="ticker">
This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.
    </div>
  </div>
<p>Content after ticker</p>
<style>
@keyframes customticker {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}


/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}


/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
  display: inline-block;
  white-space: nowrap;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: customticker;
  animation-name: customticker;
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
}

</style>

感谢您的任何建议！抱歉，如果我不遵守某些规则！

最好的问候 oop

Answer 1

您可以从transform: translate3d(0, 0, 0);开始制作动画，因此可能需要进行其他更改，例如制作股票代码padding-right: 100%;和股票代码padding-left: 100%;。对于第二个问题（避免消失的文本），您可能需要再添加一个容器并将其设置为overflow:hidden;。

请参见下面的代码段

/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
  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);
  }
}


/* Formatting the full-width ticker wrapper background and font color */
#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding-left: 100%;
}


/* Formatting the ticker content background, font color, padding and exit state */
#ticker {
  display: inline-block;
  white-space: nowrap;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: customticker;
  animation-name: customticker;
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
  padding-right: 100%;
}

#container {
  overflow:hidden;
  width:100%;
}

<p>Content before ticker</p>
  <div id="container">
  
  <div id="tickerwrap">
    <div id="ticker">This is some Text. This is some more Text1. This is some more Text2. This is some more Text3. This is some more Text4. This is some more Text5. This is some more Text6. This is some more Text7. This is some more Text8. This is some more Text9. This is some more Text10.</div>
  </div>
  </div>
<p>Content after ticker</p>

您也可以here对其进行测试。

希望这个威尔克能帮助您！：）

CSS Newsticker，动画之间存在延迟（以及其他问题）

1 个答案: