小程序 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;

}

}