图片开始是灰色,点击之后,从点击点扩散变彩色一个灰色的图片,点击之后,从点击点开始慢慢圆形扩散变成彩色图片,使用了css

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
 
    .image-animation {
        position: relative;
    }
 
    .image {
        position: absolute;
        width: 800px;
        height: 800px;
    }
 
    .circle {
        clip-path: circle(0% at 0px 0px);
    }
 
    .gray {
        filter: grayscale(1);
    }
 
    img {
        width: 100%;
        height: 100%;
    }
 
</style>
<body>
 
<div class="image-animation">
    <div class="image gray">
        <img src="../assets/shang.png" alt="">
    </div>
    <div class="image circle">
        <img src="../assets/shang.png" alt="">
    </div>
</div>
</body>
<script>
    const imageAnimation = document.querySelector('.image-animation')
    const circle = document.querySelector('.circle')
    imageAnimation.addEventListener('click', (e) => {
        const {offsetX, offsetY} = e
        circle.style.clipPath = `circle(0% at ${offsetX}px ${offsetY}px)`;
        setTimeout(() => {
            circle.style.transition = `clip-path 0.5s linear`;
            circle.style.clipPath = `circle(200% at ${offsetX}px ${offsetY}px)`;
        })
    })
 
</script>
</html>