css 实现文字横向循环滚动

实现效果

思路

## 直接上代码,html部分文章来源地址https://www.toymoban.com/news/detail-657602.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%);
		}
	}

到了这里，关于css 实现文字横向循环滚动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！