css 单行滚动流水线形式

最新推荐文章于 2024-10-29 13:19:42 发布

原创最新推荐文章于 2024-10-29 13:19:42 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

            .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>