继续创造，加快生长！这是我参加「日新计划 10 月更文应战」的第15天，点击查看活动详情

前言

跑马灯咱们都见过吧？只是单单的跑马灯有点太炫了，看久了眼睛就亮瞎了，今日我带咱们手把手用 CSS 制造一个百看不腻的跑马灯，不信你往下瞅瞅？

本文将会带咱们学到以下知识点：

  1. 笔直水平居中方法
  2. text-shadow 的用法
  3. CSS 变量的简略应用
  4. 旋转特点 rotate 的用法
  5. transform-origin 改动旋转的原点
  6. animation 中 steps 的用法

重置样式

首先仍是老规矩，咱们先将样式重置一下，避免不同浏览器的作用不一致。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ps：通配符会匹配页面上的 一切元素 ，相当于将整颗 DOM 树都进行了遍历，功率很低 ，咱们日常开中不要这么写，咱们写 demo 自己知道就好了。

布景板

咱们会后续的作用会展现在视口中心方位，因而，为了撑开 body 的高度，咱们需求将它的高度设置为 100vh，也便是与视口同高。

其次，在 body 元素 宽高确定 的情况下，咱们能够运用 flex 布局来完成 水平笔直居中 的作用。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #222;
}

到这儿为止都比较根底，可是小伙伴们千万别不重视，细节决定成败。

文字居中

接下来咱们绘制文字，这儿我经过 h3 标签，内嵌 span 标签完成的。这样刚好用上了 h3 的粗标题作用。

<h3>CatWatermelon is <span>handsome</span></h3>

接下来咱们要完成文字居中的作用了，这时有的小伙伴会问：刚刚上文不是已经让 body 设置了水平笔直居中吗，还要做？

上文的确设置了，可是咱们想要的作用是文字叠加在特效上的，什么意思呢？咱们看看下面这张图：

✨ 包教包会！纯 CSS 完成步进盘绕跑马灯作用

假设仅靠上文的手法，最终的成品会是左图那样，特效在上，文字在下，而咱们想要的是文字和特效重叠的作用，那么这就必须让文字必定的居中了。

这儿咱们要用到另一个水平笔直居中手法：必定定位+transform。

h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    ...
}

什么原理呢？

✨ 包教包会！纯 CSS 完成步进盘绕跑马灯作用

咱们看看上图，这是正常 left: 50% 和 top: 50% 的作用，左面和上面都偏了点，必定不是咱们想要的，除非能让它左面上面都“回去”半个身位。诶，刚刚的 transform 莫非便是这个作用？恭喜你，答对了！

咱们日常开发中常常运用这套组合去完成水平笔直居中的作用。话不多说，咱们回到正题。

发光文字

接下来咱们要让 span 标签内的文字“发光”了，详细怎样完成呢？

不知道咱们平常开发中 box-shadow 特点用的多不多，咱们平常用它进行暗影的绘制，也能够模仿发光作用，不过它是针对 盒子模型 的，也便是整个标签。CSS3 中推出了一个新的特点：text-shadow ，它的作用和 box-shadow 很类似，不同的是前者用于 文字 ，后者用于 盒子。

为了避免有的小伙伴仍是没明白，我做了个动图：

✨ 包教包会！纯 CSS 完成步进盘绕跑马灯作用

从图中能够看到 text-shadow 和 box-shadow 很类似，咱们的文字发光作用实际上是用 5 个暗影模仿的。

 h3 span {
    color: #fff;
    font-weight: 500;
    text-shadow: 0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #fff,
    0 0 50px #fff;
}

盘绕方块

接下来是比较难了解的一个作用了，可是了解了很好做。

咱们要做一些盘绕文字的方块，我给咱们画个示意图。

✨ 包教包会！纯 CSS 完成步进盘绕跑马灯作用

原理便是将 12 个正方形左上角都放置一个方块，然后每个正方形都进行必定视点的旋转，详细旋转多少度呢？咱们知道一圈是 360，咱们有 12 个正方形需求旋转，因而每个正方形的旋转视点为 360 / 12 = 30。

为了便利计算，咱们将 12 个方块都设置一个 CSS 变量 。

<div class="box">
    <div class="loader">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        ...
        <span style="--i:12"></span>
    </div>
    <h3>CatWatermelon is <span>handsome</span></h3>
</div>

小方块的外层容器咱们用 span 标签来做。

 .loader {
    position: relative;
    width: 150px;
    height: 150px;
}
.loader span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(30deg * var(--i)));
}

这儿运用到了 rotate 特点来进行旋转，和咱们刚刚的示意图相同，

接下来是小方块的制造。

.loader span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
}

这儿咱们经过将 span 正方形进行 相对定位 ，然后伪元素模仿的小方块进行 必定定位 ，将小方块定位到左上角的方位。

来看看现在的作用吧：

✨ 包教包会！纯 CSS 完成步进盘绕跑马灯作用

让方块发光

接下来咱们要让部分方块发光，比方每隔两个方块，就有一个方块发光。

详细怎样做呢？首先每隔两块用 CSS 言语怎样了解呢？不知道小伙伴们平常开发的时分有没有用过伪元素？first-child、last-child？它们别离表明父元素的第一个子元素以及父元素的最终一个子元素。那么咱们假设要拜访第二个元素或者是第三个元素，就要用到 nth-child 特点了。

nth-child(n) 接收一个参数，表明要拜访第几个，值得一提的是，它能够传入一个表达式，比方咱们要拜访 2 的倍数，就能够运用 nth-child(2n+2)，同理，咱们假设要完成每隔两个拜访，就要经过 nth-child(3n+3) 来完成了。

咱们将小方块增加白色布景，然后发光作用咱们能够运用 box-shadow，用 5 个暗影进行叠加处理。

.loader span:nth-child(3n + 3):before {
    background: #fff;
    box-shadow: 0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #fff,
    0 0 50px #fff;
}

咱们看看此时的作用：

✨ 包教包会！纯 CSS 完成步进盘绕跑马灯作用

让小方块旋转起来

看到小标题有的小伙伴就乐了：这还不简略？直接 animation + rotate 一把梭。

好像也没错，可是你真的想清楚了吗？咱们先来一版看看作用。

.loader span:nth-child(3n + 3):before {
    ...
    animation: animateSquare 2s linear infinite;
}
@keyframes animateSquare {
    0%,25% {
        transform: rotate(0deg);
    }
    75%,90%,100% {
        transform: rotate(180deg);
    }
}

咱们别离在 0%、25%、75%、90% 以及 100% 的时分设置不同的旋转视点，让它们有一个速度差的感觉。

✨ 包教包会！纯 CSS 完成步进盘绕跑马灯作用

从图中咱们能够发现小方块们是旋转了没错，可是好像没有幻想中那样跑到下一个发光小方块的方位。这是由于 rotate 是以原点方位来进行旋转的，正方形的原点在它的穿插轴的交点方位，因而旋转时是待在原地的。

为了完成这个作用，咱们需求用到另一个特点：transform-origin 。

它能够改动咱们的原点方位，让物体沿着新的原点进行变换。

咱们试试不断加大 transform-origin 的值，看看改动它之后对咱们的 rotate 作用有什么影响。

✨ 包教包会！纯 CSS 完成步进盘绕跑马灯作用

能够发现， transform-origin 的值越大，绕的幅度就越大。

那么咱们为了到达当前发光小方块旋转到下一发光小方块的作用，咱们就要找一个适宜的 transform-origin 值，这个值怎样计算呢？很简略，咱们直接设置为正方形长度的一半，也便是 150 / 2 = 75 。咱们再看看作用：

✨ 包教包会！纯 CSS 完成步进盘绕跑马灯作用

这就对了。咱们接着走。

发光走马灯

接下来咱们就要让发光小方块像走马灯相同，一个亮完后让下一个亮起来。

怎样完成呢？这儿有点杂乱了，咱们先让它们旋转起来吧。

 .loader {
    ...
    animation: animate 24s linear infinite;
}
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

只要给 .loader 类增加一个动画 animate，并让其在 24 秒内线性循环播映就好了。

✨ 包教包会！纯 CSS 完成步进盘绕跑马灯作用

这个旋转的动画在 24 秒内会完成绕圈 360 的动作，咱们能够看到它是一步一个脚印安分守己的“走”（这儿后边要考，记住了昂）。

可是这不是咱们想要的作用，咱们不需求它渐渐走，为了模仿走马灯，咱们需求发光小方块一次跳一格（一次旋转到必定方位，使其看着像跳了一格）。为此，咱们需求将 animation 中的 linear 特点换为 steps(12)。

别的先不说，咱们先看作用：

✨ 包教包会！纯 CSS 完成步进盘绕跑马灯作用

是不是每个发光小方块都一次跳一格？这是什么原理呢？

这便是 steps 的魔力。假设咱们把 linear 比作一步一个脚印，那能够将 steps 比作瞬移，它省略了中间的进程。这么说或许有的小伙伴仍是不懂，话不多说，上示意图好吧。

✨ 包教包会！纯 CSS 完成步进盘绕跑马灯作用

假设咱们要在 10 秒内让正方形旋转 90，那么咱们运用 linear 就大概像上图相同（省略进程），是渐渐旋转曩昔的；而假设咱们运用 steps(4)，就会每 10 / 4 秒时，截取当时正方形形状的 快照 ，共截取 4 张。

咱们想要完成小方块一跳一跳的作用，便是每 24 / 2 秒时，截取一次当时状况的快照。为什么是 24 / 2 呢？由于 24 秒旋转 360，每秒旋转 15，而咱们刚刚的小方块围绕作用是每个正方形旋转 30 * var(--i) 完成的，也便是说每个正方形的旋转度数相差 30，为了完成瞬移的作用，咱们要截取的是 30 时的快照，也便是每 2 秒截一次，因而 steps 的参数是 12。

 .loader {
    position: relative;
    width: 150px;
    height: 150px;
    animation: animate 24s steps(12) infinite;
}

码上

Github 源码

juejin-demo/animate-block-demo at main catwatermelon/juejin-demo (github.com)

结束语

本文就到此结束了，希望咱们共同努力，早日拿下 CSS 。

假设文中有不对的当地，或是咱们有不同的见地，欢迎指出 。

假设咱们觉得一切收成，欢迎一键三连。