css上下滚动文字

效果图

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

css

bash 复制代码
.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行高度 */
		}
	}
}
相关推荐
WebInfra21 分钟前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋1 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴1 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
Java 码农2 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan3 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown3 小时前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js
胡gh3 小时前
浏览器:我要用缓存!服务器:你缓存过期了!怎么把数据挽留住,这是个问题。
前端·面试·node.js
你挚爱的强哥3 小时前
SCSS上传图片占位区域样式
前端·css·scss
奶球不是球3 小时前
css新特性
前端·css
Nicholas683 小时前
flutter滚动视图之Viewport、RenderViewport源码解析(六)
前端