css實現文字上下滾動效果，類似通知欄的效果

先看效果：

1.js文件：

import React from 'react';
import styles from './notice.less';
const noticePng = require('../../../../../img/notification.png');

class Notice extends React.Component {
  render() {
    return (
      <div className={styles.noticeContainer}>
        <img src={noticePng} className={styles.noticeImg} />
        <div className={styles.noticeWrap}>
          <div className={styles.noticeRow}>這是第一行通知第一行通知。</div>
          <div className={styles.noticeRow}>這是第二行通知第二行通知。</div>
        </div>
      </div>
    );
  }
}

export default Notice;

2.css文件(less預處理器)：

.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;
}