思路

在wallpaper上面制作了一张X射线效果的壁纸，突发奇想CSS+JS能否实现这一效果。

代码

<style>
    body {
        margin: 0;
        overflow: hidden;
    }
    .container {
        position: relative;
        height: 40vh;
    }
    .image1, .image2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }
    .image1 {
        background-image: url('');
        z-index: 2;
    }
    .image2 {
        background-image: url('');
        z-index: 1;
    }
</style>



<div class="container">
    <div class="image1" id="image1"></div>
    <div class="image2"></div>
</div>

<script>
    const image1 = document.getElementById('image1');

    // 在容器上监听鼠标移动事件
    document.querySelector('.container').addEventListener('mousemove', (e) => {
        const rect = e.target.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        // 使用clip-path在鼠标位置创建一个圆形的可见区域
        image1.style.clipPath = `circle(100px at ${x}px ${y}px)`;
    });

    // 当鼠标离开容器时恢复初始状态
    document.querySelector('.container').addEventListener('mouseleave', () => {
        image1.style.clipPath = 'circle(0 at 0 0)';
    });
</script>

预览

跳转