css3实现无缝滚动

css3实现无缝滚动

横向滚动

<view class="move-box">
    <view class="move">
		<view class="item" v-for="(item, index) in 2" :key="index">
			{{index}}寒雨连江夜入吴,平明送客楚山孤,洛阳亲友如相问,一片冰心在玉壶。
		</view>
    </view>
</view>

.move-box {
	position: relative;
	width: 100%;
	white-space: nowrap;
	.move {
		position: absolute;
		top: 0;
		width: 1520rpx;
		overflow: hidden;
		white-space: nowrap; 
		animation: move 10s infinite linear normal;
	}
	.item {
		float: left;
		width: 760rpx;
		font-size: 26rpx;
	}
}
@keyframes move {
	0% { 
		left: 0;
	}
	100% {
		left: -760rpx;
	}
}

纵向滚动元素

<template>
	<view class="list">
		<view class="group">
			<view class="item" v-for="(item, index) in 6" :key="index">
				1*{{index}}
			</view>
			<view class="item" v-for="(item, index) in 6" :key="index">
				2*{{index}}
			</view>
		</view>
	</view>
</template>

.list {
	margin: 20px auto;
	position: relative;
	width: 300rpx;
	height: 300rpx;
	overflow: hidden;
	border: 1px solid red;
	.group {
		position: relative;
		width: 300rpx;
		animation: moveUp 5s linear infinite normal;
	}
}

@keyframes moveUp {
	0% {
		transform:translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(0, -300rpx, 0);
	}
}

注意：

1. 移动的距离( 例left)，要与每项(item)的宽度保持一致，来实现无缝滚动。
2. 如果动态元素，宽度需要计算…
3. 【可以不用完全的复制一份】动画位移的长度等于元素之和，当最后一个元素移出时，动画也正好完成。根据需要来填充空白部分（假设图片就放前面的那几张），当新一轮动画开始时，正好是开始的那几张图片，因此达到无缝循环效果。