小程序使用animation实现跑马灯 - 湖伊与巴黎
小程序使用animation实现跑马灯
html:
<view class="marquee">
<view class="content">
<text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>
<text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>
<text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>
</view>
</view>
css:@keyframes kf-marque-animation{ 0% { transform: translateX(0); } 100% { transform: translateX(-33.3%); } }
.marquee{
width: 100%;
height: 44px;
line-height: 44px;
background: #fff;
border: none;
display: block;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
position: relative;
font-size: 28rpx;
}
.marquee .content{
display: inline-block;
position: relative;
padding-right: 0px;
animation: kf-marque-animation 11.3s linear infinite;
white-space: nowrap;
}
版权声明：本文为Ba-Li原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。