先看看效果图吧

下面来看实现思路

又是摸鱼的下午，无聊来实现了一下这个效果，记录一下，说不定以后有这需求，记一下放到官网上也是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