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);

}
}

(适用于列表的内容固定)

posted @ 2021-07-12 13:54  寂静星空2018  阅读(199)  评论(0编辑  收藏  举报