循环滚动公告（transform方式）

最新推荐文章于 2024-06-17 10:26:05 发布

原创最新推荐文章于 2024-06-17 10:26:05 发布 · 3.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #前端 #滚动公告

本文介绍了一种使用CSS动画实现文本滚动效果的方法。通过transform属性控制文本的移动距离，使文本能够在视图中从右向左无限滚动。适用于公告栏等需要滚动显示长文本的场景。

核心思想：利用transform属性读取文本长度进行判断CSS动画向左移动的长度。

<!-- wxml -->
<view class='srcoll_frame'>
    <view class="srcollText">{{remindMessage}}</view>
</view>

<!-- js -->
Page({
    data: {
        remindMessage: '你可以自定义这条公告的内容，长度任意。'
    }
})

<!-- wxss -->
.srcoll_frame{
    position: relative;
    width: 100%;
    height: 88rpx;
    background: #FFFFCC;
    overflow: hidden;
}
@keyframes remindMessage{
    0% {
        -webkit-transform: translateX(750rpx);
    }
    100% {
        -webkit-transform: translateX(-100%);
    }
}
.srcollText{
    top: 0;
    height: 100%;
    color: #FF9F0B;
    font-size: 28rpx;
    position: absolute;
    white-space: nowrap;
    line-height: 88rpx;
    animation: remindMessage 20s linear infinite;
}