html中如何设置几张图片在一个div里来回切换_我在 B站 的秋季主题中学习了 “图层组合动画”...

众所周知，B 站 是个适合学习的好网站，我们团队的小伙伴也是经常上 B站 学习。

某一天在 B站 学习的时候，发现 B站 已经开启了秋季主题，并且在头图的这个交互上还内有乾坤。随着我们的鼠标变换位置，头图也跟随着我们的鼠标位置进行变换，配上秋季主题，显得特别治愈。(如下图)

小编对这个交互也是挺感兴趣的，那接下来我们直接进入主题，来试着实现这种动画效果吧！

原理分析

我们先进行实现原理分析，打开控制台，可以发现这个效果是通过几个图层变换位置和高斯模糊来实现的(如下图)

image

除此之外，还有个小女孩的 眨眼 特效，是通过切换图片来实现的。所以我们实现的步骤分解为四步：

1. 获取对应的图片；
2. 将图片按照效果图，摆放在对应的位置，设置默认的高斯模糊；
3. 通过切换图片制作 眨眼 特效；
4. 根据鼠标位置切换图片位置和高斯模糊；

那我们遵循上面的步骤，开始制作吧！

获取图片

首先，我们打开控制台(F12)，在控制台输入下面这行代码来获取图片。

var images = document.querySelectorAll(".animated-banner .layer img");
var urlList = [].slice.call(images).map((item) => item.src);
console.log(JSON.stringify(urlList, null, 2));

image

如上图所示，我们将这几张图片下载到自己的电脑中(如下图)

image

还有个动画轮播图，我们使用下面这行代码来获取不同的几张图片。

var animateImgList = [];
setInterval(() => {
     
  var imgSrc = document.querySelector(
    ".animated-banner >.layer:nth-child(2) img"
  ).src;
  if (!animateImgList.includes(imgSrc)) {
     
    console.log(imgSrc);
    animateImgList.push(imgSrc);
  }
}, 200);

image

如上图所示，我们可以得到几张不同状态的图片，