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%);}}