动态效果描述：初始时，呈现的是视频融合到帖子背景图像的样貌。在音乐正常播放的前提下，设备指针移动到帖子上但不是播放器之上时（触屏设备点击一下播放器之外的帖子界面），帖子的::after伪元素呈现遮罩特效，伪元素的背景图片与帖子界面以反斜杠对角线方式来回切换（属于转场特效）。设备指针离开帖子界面或移动到播放器之上
（触屏设配使用点击操作，点击目标是帖子外围或播放器<这会暂停或播放音乐>）不会触发转场特效。 实现方法简述：

::after 伪元素使用CSS属性 -webkit-mask 设计一个线性渐变的遮罩样式，代码在 18 行。渐变方向自左下角到右上角，红色色标终止于 var(--pos)，意思是 --pos 这一部分遮罩下的源图案是可见的，--pos 开始时是 0.1%（第10行），然后交给JS动态管理。

代码第50行， var zStep = 0.2, zVal = 0, zDo = false; ，声明了三个JS变量，zStep 是步进值，zVal 是 --pos 要使用的变量值，zDo 是转场依据，一个布尔变量。这三个变量的共同作用操作转场特效。

函数 zMask() ，代码在 50~58 行。函数每次执行，均会将 zVal 的现值加上步进值 zStep（代码52行），当 zVal 大于 100 或少于 -5 时则让 zStep 值变为正负互反，这样可以保证遮罩红色色标终止值在 -5~100 之间来回切换，代码在 53 行。然后加入一个定时器 setTimeout，每隔 20ms 给CSS变量 --pos 赋值一次，并递归执行 zMast() 函数以达到有条件的“永动”目的。

帖子容器的设备指针移入事件触发 zMask() 函数的执行，代码在 65~69行。其中，66行给出一个条件，鼠标指针不在容器自身的直接上方（比如在播放器上面）或音乐暂停中时不触发函数的执行。有朋友可能会问，那视频呢？视频被 ::after 遮挡了，设备指针没有触碰到视频，小播则设置了 z-index 层级属性，它在 ::after 之上层。

帖子容器的设备指针移出终止 zMak() 函数的运行，代码在 70 行。

JS代码看似复杂，实则简单，弄懂逻辑关系的处理便可。

前一篇: In a Birds Eye
下一篇: 《太极》贴子说明