admin 管理员组

文章数量: 1087131

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

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

效果图：

人狠话不多，代码如下：

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

本文标签： css实现文字上下滚动轮播效果

版权声明：本文标题：css实现文字上下滚动轮播效果 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1698000337a281648.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。