css实现列表自动滚动效果

HTML代码：

    <div class="container">

      <div class="wrapper">

        <ul>

          <li>第一条</li>

          <li>第二条</li>

          <li>第三条</li>

          <li>第四条</li>

          <li>第五条</li>

          <li>第六条</li>

        </ul>

      </div>

    </div>

css代码：

.container {

  margin-top: 30px;

  width: 300px;

  height: 250px;

  overflow: hidden;

}

.wrapper {

  width: 100%;

  height: 100%;

  position: relative;

}

ul {

  width: 100%;

  height: auto;

  position: absolute;

  animation: scroll 20s linear infinite;

}

li {

  width: 100%;

  height: 50px;

  line-height: 50px;

  text-align: center;

}

@keyframes scroll {

  0% {

    transform: translateY(0);

  }

  100% {

    transform: translateY(-100%);

  }

}

/* 鼠标悬停停止滚动 */

.container:hover .wrapper ul {

  animation-play-state: paused;

}