从零开始

html

<div class="box"> <div class="down">东东么么哒</div> <div class="up">东东么么哒</div> </div> 复制代码

css

.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); font-size: 5em; width: 5em; height: 1.2em;
} 复制代码

这里涉及到两个div了，一个红豆色的div和一个浅蓝色的div，而且内容都是"东东么么哒"
而且它们需要完全重合，包括文字内容，字体大小，位置等等
这里就涉及到层级问题了

第一个关键属性 z-index: n 复制代码

.up, .down { position: absolute; height: 100%; line-height: 1;
} .up { z-index: 2; 
} .down { z-index: 1;
} 复制代码

视觉分析来看

是滑动的的div设置了半透明，颜色结合的部分改变的颜色？ 复制代码

不对，滑动的div颜色是浅灰色，底色是红豆色，是不能结合成浅蓝色的
不是颜色的结合，那么肯定是自定义的颜色，那就是说浅蓝色的文字本身就在滑动的div上面
如果div上面的字要显示成图里面这样，那么必然是通过切割出来的

第二个关键属性 overflow: hidden; 复制代码

.up的div处理成滑块

.up { color: lightblue; z-index: 2; width: 1em; overflow: hidden; border-radius: 15%; background: #eee;
} .down { color: indianred; z-index: 1;
} 复制代码

这个时候回想一下轮播图，是不是轮播图也实现了类似的效果，ok，继续往下
轮播图滚动的是图片序列，我们反过来理解，滚动“窗口”
那么我们通过animation来制作动画，通过改变left的值实现窗口的滚动

第三个关键属性 animation 复制代码

.up { animation: run 2.5s infinite; -webkit-animation: run 2.5s infinite;
}
@keyframes run {
  0% { left: -1em; }
  100% { left: 5em; }
}
@-webkit-keyframes run {
  0% { left: -1em; }
  100% { left: 5em; }
} 复制代码

然而我们发现一个div好像解决不了，因为窗口需要一个空白div，文字内容需要新的div
其实一个div可以解决，我们通过伪元素after或者伪元素before就能构造

第四个关键属性 ::before || ::after 复制代码

html结构变化，.up的div只做滑块

<div class="box"> <div class="down">东东么么哒</div> <div class="up"></div> </div> 复制代码

css变化

.up::before { content: "东东么么哒"; position: absolute; width: 5em;
} 复制代码

可是窗口在滚动也会影响伪元素的位置！
既然这样，那么我们给伪元素也来和窗口运动刚刚相反的动画吧，这样相对浏览器不就是静止了吗...

.up::before { animation: run2 2.5s infinite; -webkit-animation: run2 2.5s infinite;
}
@keyframes run2 {
  0% { left: 1em; }
  100% { left: -5em; }
}
@-webkit-keyframes run2 {
  0% { left: 1em; }
  100% { left: -5em; }
} 复制代码

以上不需要用到JavaScript，材料准备完毕！

可维护的优化

CodePen地址：优化后的代码

列举需要优化的点：

• 伪元素content的值与.down的div文字的DRY问题
• 如何通过JavaScript调整展示的整体大小
• css里面反复出现的相同的值，这样不够DRY
• 滑块的运动轨迹一直有效处于文字的上面（即下次更换文字内容的时候，不需要更换滑动结束时候的left值）

我们发现，不能通过JavaScript来改变伪元素的content
如果能通过修改JavaScript变量就能改变div的文字和伪元素的文字，那就好了！

答案是可以的，css通过var()可以获取css变量，通过--属性可以设置css变量，那么我们把所有变量挂载到根属性:root上面，就可以获取了

而且浏览器里面可以发现

document.querySelector(':root') === document.documentElement // true 复制代码

说明这里就是html的根属性，接下来通过document.documentElement.style.setProperty('--属性', 值)既可以保证代码的可维护性，然后我们把css代码通过变量优化起来，全部导入到JavaScript的对象里，尽量做到DRY!