uni app实现多行文字滚动效果

十贰_

已于 2023-03-23 15:20:08 修改

阅读量2k

点赞数 6

文章标签： uni-app css css3

于 2023-03-21 17:22:34 首次发布

本文链接：https://blog.csdn.net/qq_39224105/article/details/129693219

版权

(这里是废话，讲述了我做这个效果的心路历程------------)

之前博主在做文字效果轮播的时候，利用的是js里面的定时器，对需要轮播的元素进行相对定位绝对顶对，再获取dom元素，利用js操作css样式，设置定时间操作top的值，每100ms减1px，来实现轮播先过，但是在很多浏览器中会出现卡顿情况。本来这次我也打算使用这种写法来完成这种效果，但是uni app的框架里面，可以根据js获取dom元素，但是不能操作dom元素的style属性，然后我就去找各种插件，也没有想要的效果，偶然间想到可以用动画来实现，随后恍然大悟，实现了项目经理想要的效果，先延时2s，然后再进行滚动，随后我就来写下这个博客了(自己之前没想到用animation，真的没想到还有这么个东西)，给大家分享。
在这里插入图片描述

在这里插入图片描述

(这里是正文------------)

首页文字轮播展示效果，大部分组件库中的文字轮播都是单行的进行轮播，用轮播图实现多行文字滚动效果，需要设置循环滚动时间，那么就会导致文字在第一次触发轮播的时候时间间隔过长，所以推荐使用css中的animation属性进行实现，这样代码的兼容行也会变强，也方便后期的维护。

下面展示下具体的实现效果是怎么样的：

在这里插入图片描述

            @-webkit-keyframes rowup {
				0% {
					-webkit-transform: translate3d(0, 0, 0);
					transform: translate3d(0, 0, 0);
				}
			
				100% {
					-webkit-transform: translate3d(0, -250rpx, 0);
					transform: translate3d(0, -250rpx, 0);
				}
			}
			@keyframes rowup {
				0% {
					-webkit-transform: translate3d(0, 0, 0);
					transform: translate3d(0, 0, 0);
				}
			
				100% {
					-webkit-transform: translate3d(0, -250rpx, 0);
					transform: translate3d(0, -250rpx, 0);
				}
			}
			.swiperC-text {
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #323232;
				width: 475rpx;
				line-height: 38rpx;
				-webkit-animation: 10s rowup linear infinite normal;
				animation: 10s rowup linear infinite normal;
				animation-delay: 2s;
			}