css实现文字上下滚动轮播效果

_葱

已于 2022-05-11 23:34:22 修改

阅读量1.5w

点赞数 5

分类专栏： react 文章标签： css 文字上下滚动轮播 react

于 2019-09-02 14:57:56 首次发布

本文链接：https://blog.csdn.net/qq_20567691/article/details/100281931

版权

react 专栏收录该内容

5 篇文章

订阅专栏

lizuncong (lizuncong) · GitHubI am a strong believer in reverse engineering. lizuncong has 42 repositories available. Follow their code on GitHub.https://github.com/lizuncong

效果图：

人狠话不多，代码如下：

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