css文字滚动
作者：互联网
<div class="mechanism">
<div class="re_roll">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
css
.mechanism{
height: 200px;
overflow: hidden;
}
.re_roll{
-webkit-animation: 30s rowup linear infinite normal;
animation: 30s rowup linear infinite normal;
position: relative;
}
.mechanism:hover .re_roll{
animation-play-state: paused;
//鼠标经过停止滚动
}
@keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, (此处列表高度列如：-200px), 0);
transform: translate3d(0, (此处列表高度列如：-200px), 0);
}
}
(适用于列表的内容固定）
标签：文字,translate3d,滚动,transform,animation,rowup,webkit,css,200px 来源： https://www.cnblogs.com/jijingxingkong/p/15001744.html