先看看效果图吧

下面来看实现思路

又是摸鱼的下午，无聊来实现了一下这个效果，记录一下，说不定以后有这需求，记一下放到官网上也是OK的， 我这里提供一种实现方法，当然你们想用放大加模糊也是可以的，想怎么来就怎么来

1.背景颜色不是固定的，是随着图片的切换动态改变

原理：
1.当鼠标移入到某一张图片时，拿到这张图片
2.我们就可以把这张图片画到canvas里，就可以获取到每一个像素点
3.我们的背景是需要渐变的，我们是需要三种颜色的渐变，当然也可以有很多种，看你们的心情
4.我们就要计算出前三种的主要颜色，但是每个像素点的颜色非常非常多，好多颜色也非常相近，我们通过肉眼肯定看不出来的，这个时候就要用到计算机了
5.需要一种近似算法（颜色聚合算法）了，就是把好多相近的颜色聚合成一种颜色，当然我们就要用到第三方库（colorthief）了

准备好html

<template>
  <div class="box">
    <div class="item" v-for="item in 8" :key="item" :class="item === hoverIndex ? 'over' : ''">
      <img crossorigin="anonymous" @mouseenter="onMousenter($event.target, item)" @mouseleave="onMousleave"
        :src="`https://picsum.photos/438/300?id=${item}`" alt=""
        :style="{ opacity: hoverIndex === -1 ? 1 : item === hoverIndex ? 1 : 0.2 }">// 设置透明度
    </div>
  </div>
</template>

scss

.box {
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  background-color: rgb(var(--c1), var(--c2), var(--c3));
}

.item {
  border: 1px solid #fff;
  margin-top: 50px;
  transition: 0.8s;
  padding: 5px;
  box-shadow: 0 0 10px #00000058;
  background-color: #fff;
}

img {
  transition: .8s;
}

npm安装colorthief库

npm i colorthief

导入到文件中

import ColorThief from "colorthief";

因为这是一个构造函数，所以需要创建出一个实例对象

const colorThief = new ColorThief()
const hoverIndex = ref<number>(-1) //设置变换样式的响应式变量

重点函数:鼠标移入事件onMousenter

getPalette(img,num) img是dom元素，是第三库需要将其画入到canvas中，所以需要在img标签中添加一个允许跨域的属性 crossorigin="anonymous"，不然会报错
num是需要提取几种颜色，同样也会返回多少个数组
返回的是一个promise，需要await

const onMousenter = async (img: EventTarget | null, i: number) => {
  hoverIndex.value = i //将响应式变量改成自身，样式就生效了
  const colors = await colorThief.getPalette(img, 3) 
  console.log(colors); //获取到三个数组，将其数组改造成rgb格式
  const [c1, c2, c3] = colors.map((c: string[]) => `rgb(${c[0]},${c[1]},${c[2]})`)//将三个颜色解构出来
  html.style.setProperty('--c1', c1) //给html设置变量，下面有步骤
  html.style.setProperty('--c2', c2)
  html.style.setProperty('--c3', c3)
}

鼠标移出事件

将响应式变量初始化，将背景颜色改为白色

const onMousleave = () => {
  hoverIndex.value = -1
  html.style.setProperty('--c1', '#fff')
  html.style.setProperty('--c2', '#fff')
  html.style.setProperty('--c3', '#fff')
}

获取html根元素

const html = document.documentElement

在主文件index.html给html设置渐变变量

<style>
      html{
        background-image: linear-gradient(to bottom, var(--c1), var(--c2),var(--c3));
      }
</style>

需要注意的是colorthief使用的时候需要给img设置跨域，不然会报错，还有就是给html设置渐变变量

🔥🔥🔥好的，到这里基本上就已经实现了，看着代码也不多，也没啥技术含量，全靠三方库干事，主要是记录生活，方便未来cv