上下滚动的文字跑马灯效果

最新推荐文章于 2024-07-23 17:46:24 发布

阿喵喵爱吃鱼

最新推荐文章于 2024-07-23 17:46:24 发布

阅读量535

点赞数

文章标签： uni-app html5

本文链接：https://blog.csdn.net/hlc162181/article/details/113519253

版权

上下滚动的文字跑马灯效果

html

<view class="index-top-info">
	<view class="index-top-info-list">
		<view class="index-top-info-list-wrap trans">
			<view class="index-top-info-list-wrap-item flex_a_c" v-for="(item, index) in openList" :key="index">
				<image src="/static/image/index/icon1.png" mode=""></image>
				<text class="clamp">{{ item.content }}</text>
			</view>
		</view>
		<view class="index-top-info-list-wrap trans">
			<view class="index-top-info-list-wrap-item flex_a_c" v-for="(item, index) in openList" :key="index">
				<image src="/static/image/index/icon1.png" mode=""></image>
				<text class="clamp">{{ item.content }}</text>
			</view>
		</view>		
	</view>
</view>

data

openList: [
		{
			url: '/static/image/index/swiper.png',
			text: '什么什么游戏'
		},
		{
			url: '/static/image/index/swiper.png',
			text: '什么什么游戏全新'
		},
		{
			url: '/static/image/index/swiper.png',
			text: '什么什么游戏全新下载'
		}
	],//banner数据

css

.index-top{
	&-info{
		height: 120upx;
		overflow: hidden;
		padding: 0 30upx;
		position: relative;
		&-list{
			height: 120upx;
			overflow: hidden;
			&-wrap{
				&-item{
					height: 40upx;
					color: #B6B8BF;
					font-size: 22upx;
					image{
						height: 33upx;
						width: 33upx;
						margin-right: 20upx;
					}
				}
			}
			.trans{
				animation: moveSlideshow 10s linear infinite;
			}
			@keyframes moveSlideshow {
				100% {
					transform: translateY(-100%);
				}
			 }
		}
	}
}