小程序公告滚动条css实现(VUE)

最新推荐文章于 2024-07-26 11:41:15 发布

扶我起来还能学_

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量247

点赞数 3

文章标签： javascript 微信小程序前端

本文链接：https://blog.csdn.net/qq_44131445/article/details/140351257

版权

小程序公告滚动条css实现(VUE)

页面UI

 <view class="my-notice">
 		<!--  data是数据字符串,动画的循环时间根据字符串长度动态调节-->
        <view class="content" :style="{'animation-duration': `${data.length * 250}ms`}">
            公告: {{ data }}
        </view>
    </view>

CSS

.my-notice {
    width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
    line-height: 50rpx;
    margin: 10rpx 0;
    padding:10rpx 20rpx;
    color: #fff;
}
.content {
    width: fit-content;
    white-space: nowrap;
    animation-name: tips-scrolling;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes tips-scrolling {
    0% {
        transform: translateX(50%);
    }

    100% {
        transform: translateX(-100%);
    }

}