Question

此刻，我有一个CSS自动滚动文本，如下所示：

.vscroll {
    position: absolute;
    height: auto;
  /* Starting position */
  -moz-transform:translateY(100%);
  -webkit-transform:translateY(100%);
  transform:translateY(100%);
  /* Apply animation to this element */
  -moz-animation: scroll-up 25s linear infinite;
  -webkit-animation: scroll-up 25s linear infinite;
  animation: scroll-up 25s linear infinite;
 }
 /* Move it (define the animation) */
 @-moz-keyframes scroll-up {
  0%   { -moz-transform: translateY(100%); }
  100% { -moz-transform: translateY(-100%); }
 }
 @-webkit-keyframes scroll-up {
  0%   { -webkit-transform: translateY(100%); }
  100% { -webkit-transform: translateY(-100%); }
 }
 @keyframes scroll-up {
  0%   {
  -moz-transform: translateY(100%); /* Browser bug fix */
  -webkit-transform: translateY(100%); /* Browser bug fix */
  transform: translateY(100%);
  }
  100% {
  -moz-transform: translateY(-100%); /* Browser bug fix */
  -webkit-transform: translateY(-100%); /* Browser bug fix */
  transform: translateY(-100%);
  }
}

这可以工作，但是在某些设备上看起来确实有些断断续续。因此，我希望可以执行以下操作，但仅使用CSS而不使用jQuery：https://www.jqueryscript.net/demo/Vertical-Text-Scrolling-Plugin-With-jQuery-scrollText-js/

有可能吗？

Answer 1

希望这会有所帮助（示例）。

<!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<style>
.example1 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example1 h3 {
 font-size: 3em;
 color: limegreen;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
</style>

<!-- HTML -->	
<div class="example1">
<h3>Scrolling text... </h3>
</div>

仅使用CSS自动滚动（捕捉）文本？

1 个答案: