实现效果
思路
## 直接上代码,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%);
}
}