css上下滚动文字

效果图

取得是数组里的数据 上下滚动切换

css

.notice-new {
	background: #222222;
	border-radius: 19rpx;
	margin-top: 28rpx;
	font-size: 24rpx;
	color: white;
	font-weight: 500;
	padding: 0 20rpx;
	height: 55rpx;
	line-height: 55rpx;
	overflow: hidden;

	.notice-scroll-wrapper {
		position: relative;
		// animation: noticeScroll 4s linear infinite;
		/* 动画名称、时长、速度、循环 */
	}

	/* 定义滚动动画 */
	@keyframes noticeScroll {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
			/* 滚动距离为1行高度 */
		}
	}
}