有时候需要在大屏上实现文字滚动展示的效果，今天做了个尝试，记录一下

  <div class="scrolling-text">
     <p>奋斗者奥利给，嘎嘎一嘎斯</p>
  </div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

css如下

            .scrolling-text p {
                display: inline-block;
                font-size: 24px;
                color: red;
                animation: scrollText 10s linear infinite;
            }

            @keyframes scrollText {
                0% {
                    transform: translateY(100%);
                }

                100% {
                    transform: translateY(-100%);
                }
            }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

效果如图
大屏上文字垂直滚动效果_css