在某AI抠图的官网上看到一个滑动预览抠图结果的图，主要功能就是鼠标放上去可以来回拉扯，一边是扣过的图，一边是没抠过的图，这个用在自己网站上看起来不是很酷吗？
首先先预览以下效果（ps:我不会搞gif，将就一下吧）
类似这种，鼠标在图片上滑动可以让图片过滤黑白，然后不管他的时候，会自己播放一个动画来达到展示的目的
首先，我们要清楚的是，这是很基础的问题，并不需要太复杂的方法做到，因为这是两张图片，通过隐藏一来达到这种效果
首先我们确定基本html结构
<div class="a">
<img class="bg" src="./1.png" alt="">
<div class="mask">
<img src="./1.png" alt="">
</div>
</div>
首先一个容器，两张一模一样的图片放进来，通过定位将他们重合起来
img, .mask {
position: absolute;
top: 0;
left: 0;
}
.bg {
filter: grayscale(1);
}
.mask {
width: var(--mask-width);
height: 500px;
overflow: hidden;
animation: witha 12s infinite;
border-right: 5px solid #f00;
}
对了，为了提升丝滑度。我们鼠标在移入图片改变宽度之后，为了让动画依旧从最开始的方向移动，我们使用css变量来控制动画开始的地方，还有，对了记得定义动画
:root {
--mask-width: 400px;
--mask-animate-width: 810px;
}
@keyframes witha {
0% {
width: var(--mask-width);
}
50% {
width: var(--mask-animate-width);
}
100% {
width: var(--mask-width);
}
}
现在我们的准备工作就做完了，你可以得到一个自动在动画中的预览样式，现在加入鼠标交互，这里有一个前置知识点，style.setProperty()
style.setProperty 是一个 JavaScript 方法，它允许你为 HTML 元素的 style 对象设置 CSS 属性。这个方法接受三个参数：属性名（property name）、属性值（property value）和优先级（priority，这是可选的）。
element.style.setProperty(propertyName, value, priority);
propertyName：一个字符串，表示要设置的 CSS 属性的名称。注意，这里应该使用 CSS 属性的 JavaScript 版本，比如backgroundColor而不是background-color。value：一个字符串，表示要设置的属性值。priority：一个可选的字符串，表示属性的优先级，通常是"important"。
附上完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
:root {
--mask-width: 400px;
--mask-animate-width: 810px;
}
.a {
width: 810px;
height: 500px;
margin: 80px auto ;
position: relative;
}
img, .mask {
position: absolute;
top: 0;
left: 0;
}
.bg {
filter: grayscale(1);
}
.mask {
width: var(--mask-width);
height: 500px;
overflow: hidden;
animation: witha 12s infinite;
border-right: 5px solid #f00;
}
@keyframes witha {
0% {
width: var(--mask-width);
}
50% {
width: var(--mask-animate-width);
}
100% {
width: var(--mask-width);
}
}
</style>
<body>
<div class="a">
<img class="bg" src="./1920x1080.webp" alt="">
<div class="mask">
<img src="./1920x1080.webp" alt="">
</div>
</div>
<script>
let line = null
const dom = document.querySelector('.a')
const mask = document.querySelector('.mask')
dom.addEventListener('mousemove',(e) => {
mask.style.animation = 'none'
// 解决鼠标从左侧或右侧移出时抖动获得的x位置大于或小于dom宽度的起点或终点
const l = e.x - dom.offsetLeft
let left = l
if (l > 810) left = 810
if (l < 0) left = 0
document.documentElement.style.setProperty('--mask-width', left + 'px')
})
dom.addEventListener('mouseleave',(e) => {
const l = e.x - dom.offsetLeft
// 解决鼠标从左侧或右侧移出时抖动获得的x位置大于或小于dom宽度的起点或终点
let left = l
if (l > 810) left = 810
if (l < 0) left = 0
document.documentElement.style.setProperty('--mask-width', left + 'px')
if (left > 600) {
document.documentElement.style.setProperty('--mask-animate-width', '200px')
} else {
document.documentElement.style.setProperty('--mask-animate-width', '810px')
}
mask.style.animation = 'witha 6s infinite'
} )
</script>
</body>
</html>
