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行高度 */
		}
	}
}
相关推荐
HashTang几秒前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
前端架构师-老李37 分钟前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡1 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
用户21496515898751 小时前
从零搭建uniapp环境-记录
前端
努力写代码的熊大3 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER3 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh3 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒3 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端
今天没有盐4 小时前
💕CSS 基础入门指南💕:选择器与文本样式
前端·html·响应式设计
云枫晖5 小时前
Webpack系列-Entry入口
前端·webpack