图片开始是灰色,点击之后,从点击点扩散变彩色

最新推荐文章于 2024-08-03 17:05:14 发布

在路上_w

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量408

点赞数 6

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/wanghuan93/article/details/134880697

版权

<!doctype html>
<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>