利用纯CSS实现文字横向循环滚动效果

说明: 类似跑马灯效果, 效果大致如下图, 当选择主题的时候, 下拉框出现, 选定某个,现实到按钮, 按钮的长度肯定超过了宽度, 那么这个时候用跑马灯的感觉比较合适.
我们来实现它:

http部分(结构)

<div class="grid-demo date-demo" id="themeBox">
   <span id="themeText">主题</span>
   <div></div>
   <i style="font-size: 20px;" class="layui-icon layui-icon-triangle-d"></i>
</div>

CSS部分(themeBox)

    width: 60px;
    margin: 0px auto;
    overflow: hidden;

CSS部分(themeText)

    display: inline-block;
    white-space: nowrap;
    animation: 10s cubic-bezier(0, 0.61, 1, 1) 0s infinite normal none running wordsLoop;

CSS(keyframes)

        @keyframes wordsLoop {
            0% {
                transform: translateX(200px);
                -webkit-transform: translateX(200px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }

        @-webkit-keyframes wordsLoop {
            0% {
                transform: translateX(200px);
                -webkit-transform: translateX(200px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }

说明: 上面为一个结构参数,我们可以利用JS赋值进去

//主题选择按钮
let themeBoxNode = document.getElementById("themeBox");
let themeTextNode = document.getElementById("themeText");

themeBoxNode.style.width = '60px';
themeBoxNode.style.margin = '0 auto';
themeBoxNode.style.overflow = 'hidden';
themeTextNode.style.display = "inline-block";
themeTextNode.style.whiteSpace = "nowrap";
themeTextNode.style.animation = '10s cubic-bezier(0, 0.61, 1, 1) 0s infinite normal none running wordsLoop';

原理和讲解:

display: 它是页面设计中重要的一个属性, 每个HTML都有预设它, 不同的元素也有不同的预设!大部分通常都是默认 block 或 inline其中一个, block为区块, inline为行内元素. 而我们设置的block-inline我们就可以大概猜出它是结合了 inline 和 block 两者的特性于一身, 既拥有了 block 元素可以设置 width 和 height 的特性，又保持了 inline 元素不换行的特性。

whiteSpace: 这是一个与空白相关的属性。好像也没啥东东西,分三点讨论

1. 处理文本内容中的多个空格和 Tab
2. 处理换行符
3. 在文本内容超出容器宽度时处理
   显然我们需要超出宽度的处理方式, 这儿给出一个表

**animation : ** 该属性由CSS3引入Transition（过渡）这个概念之前，CSS 是没有时间轴的。也就是说，所有的状态变化，都是即时完成;配合@keyframes 规则，你可以创建动画。创建动画是通过逐步改变从一个 CSS 样式设定到另一个。在动画过程中，您可以更改 CSS 样式的设定多次。(这方面以后有时间单独说, 也可以通过文章查看使用方式)

**PS : ** 部分内容学习自相关其他网站!