html实现上下轮播效果代码,css实现文字上下滚动轮播效果

效果图：

人狠话不多，代码如下：

import React from 'react';

import styles from './notice.less';

class Index extends React.Component {

render() {

return (

1.这是公告1公告1公告1公告1公告1公告1公告1

2.这是公告2公告2公告2公告2公告2公告2公告2

);

}

}

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;

}