在按钮标题上滑动文本，如带有 css 和 javascript 的选框（不是 jQuery）

Posted 2023-02-26

【中文标题】在按钮标题上滑动文本，如带有 css 和 javascript 的选框（不是 jQuery）

【英文标题】：Sliding text on button caption like marquee with css and javascript (Not jQuery)

【发布时间】：2016-11-17 07:09:35

【问题描述】：

我有多个带有动态文本的按钮。我希望使用 javascript 或 CSS 对每个按钮文本产生从右到左的圆形滑动效果。不使用 jQuery。看下面的场景

更新

我当前的代码

/* Make it a marquee */
    .marquee 
        width: 200px;margin: 0 auto;white-space: nowrap;overflow: hidden;
    
    .marquee span 
        display: inline-block;
        padding-left: 100%;
        text-indent: 0;
        animation: marquee 10s linear infinite;
    
    .marquee span:hover 
        animation-play-state: paused
    /* Make it move */
    @keyframes marquee 
        0%  transform: translate(0, 0); 
        30%  transform: translate(-43%, 0); 
        60%  transform: translate(-43%, 0); 
        100%  transform: translate(-100%, 0); 
    

<button class="marquee">
  <span>Lorem Ipsum is simply dummy text</span>
</button>
<button class="marquee">
  <span>LoremLorem Ipsum is simply dummy Ipsum is simply dummy text</span>
</button>

但它在按钮上的动态文本上无法正常工作。

【问题讨论】：

你尝试了什么？分享您的代码，我们可以提供帮助

我已在问题中添加了代码。请检查并帮助我。

【参考方案1】：

我已删除您的填充，因此现在跨度与按钮对齐。

由于按钮总是 200px 宽，现在第一个关键帧应该在右侧 200px 处。其他关键帧也同样简单：

/* Make it a marquee */
    .marquee 
        width: 200px;margin: 0 auto;white-space: nowrap;overflow: hidden;
    
    .marquee span 
        display: inline-block;
        text-indent: 0;
        animation: marquee 10s linear infinite;
    
    .marquee span:hover 
        animation-play-state: paused
    /* Make it move */
    @keyframes marquee 
        0%  transform: translate(200px, 0); 
        30%  transform: translate(0, 0); 
        60%  transform: translate(0, 0); 
        100%  transform: translate(-100%, 0); 
    

<button class="marquee">
  <span>Lorem Ipsum is simply dummy text</span>
</button>
<button class="marquee">
  <span>LoremLorem Ipsum is simply dummy Ipsum is simply dummy text</span>
</button>