小程序文字实现走马灯
<view style="width:400rpx;padding:0 20rpx;color:#000000;"> <view class="welcome"> <text>这是一条测试信息,文字效果另加</text> </view> </view>
.welcome { width: 100%; overflow: hidden; white-space:nowrap; overflow:-webkit-marquee; font-size: 28rpx; color: #fe4929; line-height: 80rpx; height: 80rpx; -webkit-marquee-direction: left; /* -webkit-marquee-speed: normal; */ -webkit-marquee-style: scroll; -webkit-marquee-repetition:infinite; } .welcome text { display: block; text-align: right; -webkit-animation: marquee 3s linear infinite; animation: marquee 3s linear infinite; } @-webkit-keyframes marquee { 0% { transform: translateX(15%); } 100% { transform: translateX(-100%); } } @keyframes marquee { 0% { transform: translateX(15%); } 100% { transform: translateX(-100%); } } @-webkit-keyframes marquee { 0% { transform: translateX(15%); } 100% { transform: translateX(-100%); } }
版权声明:本文为xiangxiang521原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。