【CSS练习】如何用纯 CSS 创作一个 3D 文字跑马灯特效

知识点

1.white-space 属性

• normal
  默认。空白会被浏览器忽略。
• pre
  空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
• nowrap
  文本不会换行，文本会在在同一行上继续，直到遇到
  标签为止。
• pre-wrap
  保留空白符序列，但是正常地进行换行。
• pre-line
  合并空白符序列，但是保留换行符。
• inherit
  规定应该从父元素继承 white-space 属性的值。

2. transform
   允许你旋转，缩放，倾斜或平移给定元素

3. transform-origin
   更改一个元素变形的原点

代码

        <style type="text/css">
        html, body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        .box {
            display: flex;
        }
        .inner {
            width: 200px;
            height: 100px;
            line-height: 100px;
            font-size: 32px;
            font-family: sans-serif;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
        }
        span {
            position: absolute;
            animation: move 5s linear infinite;
        }
        .inner:first-child{
            background-color: indianred;
            color: darkred;
            transform-origin: left;
            transform: perspective(300px) rotateY(-67.3deg);
        }
        .inner:first-child span{
            animation-delay:2.5s;
            left:-100%;
        }
        .inner:last-child{
            background-color: lightcoral;
            color: antiquewhite;
            transform-origin: right;
            transform: perspective(300px) rotateY(67.3deg);
        }
        @keyframes move{
            from{
                left:100%;
            }
            to {
                left: -100%;
            }
        }

        </style>

参考：https://segmentfault.com/a/1190000014663038