body {
background:green;
padding:0;
margin:0;
}
.cover {
width:100vw;
height:100vh;
background-image:url("https://picsum.photos/id/545/800/600");
background-size:100vw 100vh;
filter:grayscale(1);
overflow:hidden;
}
.cursor {
top:0;
left:0;
position:absolute;
height:300px;
width:300px;
border-radius:50%;
background:url("https://picsum.photos/id/545/800/600");
background-attachment:fixed;
background-size:100vw 100vh;
border:1px dashed;
}
对图片进行灰度处理,拖动鼠标点亮图片。
css部分,实际上是通过两个图片进行重叠显示,放在下面的是灰度的图片,放在上面的是彩色的图片。
当鼠标移动到屏幕的位置后点亮图像