风华流沙君莫笑的博客

这种效果是怎么实现的呢。其实不算是很难，原理就是依附定时器 每一秒去改变当前选中的背景颜色就好了。在onMounted中挂载定时器 并设置初始化所有下面的那个小条透明度为0。记住一定要在onunMounted中销毁定时器 并设置timer的值为空。还是在做官网的过程中遇到的动画效果 盒子的背景会循环改变。第一步先拿到dom节点 并将他们合成一个数组。最后是changeBoxBg 方法。然后就能实现背景切换的效果了。

在写官网的过程中，有一个需求是想要是先人物卡片横向无缝循环的功能。但是直接用跑马灯的时候发现他的效果是要等所有的盒子都从左边消失后才会从后面出来第一个。怎么调都不合适 给我整疑惑了， 后来百度下说是可以两个相同的盒子 一前一后，看到这豁然开朗，但是后来忘了是哪篇帖子了 这里记录一下。首先我是用v-for循环定义了四个盒子 再复制一份 这样我们一共就有八个盒子。盒子上去 这样会导致 只有其中一个盒子暂停 另一个盒子不会暂停。设置其中的样式 这里还做了一个鼠标移入实现动画暂停以及放大的效果。