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行高度 */
		}
	}
}
相关推荐
你的人类朋友11 小时前
快速搭建redis环境并使用redis客户端进行连接测试
前端·redis·后端
深蓝电商API12 小时前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright
bestcxx13 小时前
(二十七)、k8s 部署前端项目
前端·容器·kubernetes
鲸落落丶13 小时前
webpack学习
前端·学习·webpack
excel13 小时前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端
光影少年14 小时前
vue打包优化方案都有哪些?
前端·javascript·vue.js
硅谷工具人14 小时前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
β添砖java16 小时前
CSS网格布局
前端·css·html
木易 士心17 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js