css 实现文字横向循环滚动

实现效果

思路

## 直接上代码,html部分

//我这里是用的uniapp
<view class="weather_info_wrap">
	<view class="weather_info">
		当前多云，今晚8点转晴，明天有雨，温度32摄氏度。
	</view>
	<view class="weather_info">
		当前多云，今晚8点转晴，明天有雨，温度32摄氏度。
	</view>
</view>

css部分

.weather_info_wrap {
		width: 90%;
		overflow: hidden;
		white-space: nowrap;
		font-size: 24rpx;
		display: flex;
	}

	.weather_info {
		animation: 5s wordsLoop linear infinite normal;
	}
	

	@keyframes wordsLoop {
		0% {
			transform: translateX(0);
			-webkit-transform: translateX(0);
		}
		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}

	@-webkit-keyframes wordsLoop {
		0% {
			transform: translateX(0);
			-webkit-transform: translateX(0);
		}

		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}