css3实现字幕滚动效果(即跑马灯效果)

最新推荐文章于 2024-04-01 23:44:34 发布

gyuei

最新推荐文章于 2024-04-01 23:44:34 发布

阅读量3.3k

点赞数 3

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/gyueh/article/details/111996213

版权

WXML CSS 滚动字幕动画效果前端开发

关键词由优快云通过智能技术生成

小程序专栏收录该内容

67 篇文章

订阅专栏

这篇博客介绍了如何使用WXML和CSS创建一个滚动字幕的效果。通过设置样式和关键帧动画，实现了文字从屏幕左侧滑入到右侧的无缝滚动。内容包括样式设置、动画定义以及最终展示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml代码如下：

<view class='notable-container'>
	<view class="words">
		这是一条滚动的字幕这是一条滚动的字幕这是一条滚动的字幕这是一条滚动的字幕这是一条滚动的字幕
	</view>
</view>

css代码如下：

.notable-container {
    width: 100%;
}
.notable-container .words {
    font-size: 10pt;
    margin-left: 20rpx;
    position: absolute;
    top: 0rpx;
    color:#FFA500;
    white-space: nowrap;
    animation: notableAnimation 16s linear infinite;
}

@keyframes notableAnimation {
    0% {
        left: 100%;
    }

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

最终效果如图所示:
在这里插入图片描述