css 实现文字横向循环滚动

佛系努力中……

已于 2024-04-23 10:40:21 修改

阅读量848

点赞数

文章标签： css 前端

于 2023-08-18 16:15:29 首次发布

本文链接：https://blog.csdn.net/qq_45706352/article/details/132364015

版权

实现效果

在这里插入图片描述

思路

在这里插入图片描述 ## 直接上代码,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%);
		}
	}