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部分,实际上是通过两个图片进行重叠显示,放在下面的是灰度的图片,放在上面的是彩色的图片。
当鼠标移动到屏幕的位置后点亮图像