当青训营遇上码上掘金，感谢青训营为我们志同道合的小伙伴提供了一个学习的平台，在这里，我们相遇在最美的时光，沉浸在知识的海洋，我们一起学习代码编程课程，相互见证技能成长，愉快又充实地度过一个难忘的假期。
效果图
灵感主要来自于跑马灯，方块、边框的旋转变换都是主要基于跑马灯的实现。
实现过程
居中
首先，所有的文字、盒子、元素都需要整体居中，好看~
居中还不简单？不，它还真没有那么简单，有的可以简单用center实现，但是多个元素一起叠加的居中，还需要用到：绝对定位+transform。且需要注意绝对定位 left: 50% 和 top: 50% 效果会使上和左的位置都偏了点，这时需要transform 调节缩回去两边元素的50%位置。
颜色
想要突出的部分元素，那么选用的颜色一定要鲜艳，例如我通过颜色选择器找到并选用明亮的粉色和绿色。
镂空文字实现
这里贴出实现方法：
-webkit-text-stroke: 3px rgb(234, 247, 139,0.2);
-webkit-text-fill-color : transparent;
灯光散射效果
多次使用阴影text-shadow用不同像素重复覆盖实现。
灯光条跑马灯
一个大盒子嵌套四个小盒子，小盒子（即灯光条）的长度与大盒子的边相等。用到background的一个属性值:linear-gradient，通过这个属性，可以将多个颜色设置为一个盒子的背景颜色，并且还有过渡效果和渐变的方向。最后需要从第二个小盒子开始添加延时，使动画看起来更顺畅。
12方块跑马灯
rotate 属性来进行方块旋转
每隔两个方块有一个方块粉色发光，就要通过伪元素中，父元素的子元素 nth-child(3n+3) 实现。transform-origin 改变原点位置，并沿着新原点变换，还需要设置其值大小环绕合适的幅度。接着给.loader 添加一个动画 animate，并让其在一段时间内循环的执行。最后，为了使画面更连贯，将 animation 中的 linear 属性改成 steps(12)，在旋转中截取快照。
源代码
