小程序 css3走马灯效果

<view class='notable-container' style='background:#ffffff;'>
<view style='z-index:2000;background:#FFFFE0;padding-left:20rpx;'>
<image src='/images/AK-MN.png'></image>
</view>
<view style='color:#FFA500'>
<text>目中的优秀年轻干部啥样? 抓好政治建设 有一种精神开天辟地敢为人先  红色基因如何传承的</text>
</view>
</view>
 
css:
.notable-container {
display: flex;
align-items: center;
position: relative;
width: 100%;
height:80rpx;
overflow: hidden;
margin: 20rpx 0;
}

.notable-container image {
width: 40rpx;
height: 40rpx;
}

.notable-container text {
font-size: 10pt;
margin-left: 20rpx;
position: absolute;
top: 0rpx;
height: 80rpx;
white-space: nowrap;
line-height: 80rpx;
animation: notableAnimation 16s linear infinite;
}

@keyframes notableAnimation {
0% {
 
left: 100%;
}
100% {
transform: translateX(-100%);
left:0;
}
}

猜你喜欢

转载自www.cnblogs.com/lgjc/p/9253787.html
今日推荐