SOURCE

console 命令行工具 X clear

                    
>
console
let pos=document.documentElement
pos.addEventListener('mousemove',e=>{
    // e.clientX,e.clientY 相对于浏览器窗口的坐标 (不包括工具栏和滚动条)
    pos.style.setProperty('--x',e.clientX+'px')
    pos.style.setProperty('--y',e.clientY+'px')
})
<div id="clip-content">
    <div class="banner"></div>
    <div class="content">
        <h2>CSS Clip-path Effects</h2>
        <p>
            Please send this message to those people who mean something to you,to those who have touched your life in one way or another,to those who make you smile when you really need it,to those that make you see the brighter side of things when you are really down,to those who you want to let them know that you appreciate their friendship.And if you don’t, don’t worry,nothing bad will happen to you,you will just miss out on the opportunity to brighten someone’s day with this message.Please send this message to those people who mean something to you,to those who have touched your life in one way or another.
        </p>
    </div>
</div>
#clip-content {
    display: flex;
    align-items:center;
    justify-content: center;
    min-height: 100vh;
    background: #fff;
}
.banner {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597034148013&di=8a342584aef0de3ad2d602457ce025a8&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fda376fe77f3f8eb55de45e79f2d91a37ce4f90e2286a1-uzKAxN_fw658);
    background-size:cover;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    /* clip-path 使用裁剪方式创建元素的可视区域 */
    clip-path: circle(75px at var(--x) var(--y));
}
.banner:active {
    clip-path: circle(400px at var(--x) var(--y));
}

.content {
    position: relative;
    max-width: 1100px;
    z-index: 1;
    mix-blend-mode:overly;
    /* 没有鼠标事件 */
    pointer-events: none;   
    /* 控制用户能否选中文本  这里设置为不能*/
    user-select: none
}

.content h2 {
    position: relative;
    color: #fff;
    font-size: 60px;
}
.content p {
    position: relative;
    color: #fff;
    font-size: 18px;
}