Question

我尝试使用css3过渡来尝试滚动文本，它看起来对我很好，但似乎由于某种原因不起作用。非常感谢一些帮助。提前谢谢。

.scrollingtext {  
 height: 200px;   
 overflow: hidden;  
 position: relative;  
}

.scrollingtext h1 {  
 position: absolute;  
 width: 100%;  
 height: 100%;  
 margin: 0;  
 line-height: 50px;  
 text-align: center;  
-moz-transform:translateY(-100%);  
-webkit-transform:translateY(-100%);      
 transform:translateY(-100%);  
-moz-animation: scrollingtext 15s linear infinite;  
-webkit-animation: scrollingtext 15s linear infinite;  
 animation: scrollingtext 15s linear infinite;  
}  


@-moz-keyframes scrollingtext {  
0%   { -moz-transform: translateY(-100%); }  
100% { -moz-transform: translateY(100%); }  
}
@-webkit-keyframes scrollingtext {  
0%   { -webkit-transform: translateY(-100%); }  
100% { -webkit-transform: translateY(100%); }  
}  
@keyframes scrollingtext {  
0%     {     
-moz-transform: translateY(-100%);  
-webkit-transform: translateY(-100%  );   
 transform: translateY(-100%);      



 }  
 100% {   
 -moz-transform: translateY(100%);   
 -webkit-transform: translateY(100%);   
 transform: translateY(100%);   
 }  
}

https://jsfiddle.net/v656vx5o/2/

Answer 1

您在html scrolltext

中拨打了错误的课程

<div class="scrolltext">
  <h1 align="center" div id="h11">text</h1>
</div>

应该是：

<div class="scrollingtext">
  <h1 align="center" div id="h11">text</h1>
</div>

在CSS中滚动文本的问题

1 个答案: