Html
    Css
    Js

    
                        
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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

图像的阴影处理

对图片进行灰度处理,拖动鼠标点亮图片。
css部分,实际上是通过两个图片进行重叠显示,放在下面的是灰度的图片,放在上面的是彩色的图片。
当鼠标移动到屏幕的位置后点亮图像

0