css實作文字上下滾動輪播效果

效果圖：

人狠話不多，代碼如下：

import React from 'react';
import styles from './notice.less';

class Index extends React.Component {
  render() {
    return (
      <div className={styles.noticeContainer}>
        <div className={styles.noticeWrap}>
          <div className={styles.noticeRow}>1.這是公告1公告1公告1公告1公告1公告1公告1</div>
          <div className={styles.noticeRow}>2.這是公告2公告2公告2公告2公告2公告2公告2</div>
        </div>
      </div>
    );
  }
}

export default Index;
           

.noticeContainer{
  display: flex;
  align-items: center;
  background:rgba(255,245,245,1);
  border-radius:8px;
  border:1px solid rgba(240,97,86,1);
  filter:blur(0px);
  margin-bottom: 12px;
  padding: 16px;
  font-size:16px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(53,56,61,1);
  .noticeImg{
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }
}

.noticeWrap{
  height:22px;
  overflow: hidden;
  position: relative;
  flex: 1;
  .noticeRow{
    position: absolute;
    height: 100%;
    width: 100%;
  }
}
@keyframes anim1{
  0% {top: 0;opacity: 1}
  45% {top: 0; opacity: 1}
  50% {top: -100%; opacity: 0}
  51%{top: 100%; opacity: 0}
  95%{top: 100%; opacity: 1}
  96%{opacity: 1}
  100%{top: 0;opacity: 1}
}
@keyframes anim2{
  0% {top: 100%;opacity: 0}
  45% {top: 100%; opacity: 0}
  50% {top: 0; opacity: 1}
  95% {top: 0; opacity: 1}
  100%{top: -100%;opacity: 0}
}
.noticeRow:nth-child(1){
  animation: anim1 10s linear infinite;
}
.noticeRow:nth-child(2){
  top: 25px;
  animation: anim2 10s linear infinite;
}