css上下滚动文字

原创于 2025-06-21 17:27:54 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#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行高度 */
		}
	}
}