css 单行滚动流水线形式

最新推荐文章于 2024-05-30 11:17:16 发布

Edwin_jada

最新推荐文章于 2024-05-30 11:17:16 发布

阅读量116

点赞数 2

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/Edwin_jade/article/details/139064932

版权

            .lineScroll {
				    width: 610rpx;
				margin: 0 auto;
				display: flex;
				justify-content: left;
				align-items: center;
				flex-wrap: nowrap;
				overflow-x: scroll;
				position: relative;
				overflow: hidden;
				display: inline-flex;
				margin-left: 60rpx;
				.item {
					margin-right: 40rpx;
					display: inline-flex;
					justify-content: space-between;
					animation: marquee 30s linear infinite;
					flex-shrink: 0;
				}
			}
			@keyframes marquee {
			  0% {
			    transform: translateX(0);
			  }
			  100% {
			    transform: translateX(-100%);
			  }
			}

<!-- 公告 -->
		<view v-if="!closeNavType" class="Gonggao">
			<view class="lineScroll scrolling-text">
				<view v-for="(nav, index) in NavList" :key="index"  class="item"> {{nav.title}}</view>
			</view>
			<view class="closeNav" @click.stop="CloseNav()">×</view>
		</view>