<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3按住鼠标图片遮罩放大显示代码</title>
<script src="js/jquery.min.js"></script>
<style>
::-moz-selection {
color: #FFF;
background: none;
}
::selection {
color: #FFF;
background: none;
}
html {
height: 100%;
}
body {
height: 100%;
font-family: 'Montserrat', sans-serif;
text-align: center;
background: url("1.jpg") no-repeat left top;
background-size: cover;
overflow: hidden;
}
.hole {
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
box-shadow: 0 0 0 9999em #000;
border-radius: 50%;
cursor: pointer;
position: fixed;
transition: width .5s ease-in-out, height .5s ease-in-out, margin .5s ease-in-out;
}
.hole:after {
content: "";
display: block;
margin: -1% 0 0 -1%;
width: 102%;
height: 102%;
box-shadow: inset 0 0 50px 50px #000;
border-radius: 50%;
}
.hole:active {
margin: -250px 0 0 -250px;
width: 500px;
height: 500px;
transition: width 1s ease-in-out, height 1s ease-in-out, margin 1s ease-in-out;
}
p {
display: inline-block;
margin: -92px 0 0 -230px;
width: 460px;
height: 184px;
font-size: 100px;
color: #FFF;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
z-index:1;
}
p span {
display: block;
font-size: 50px;
}</style>
</head>
<body>
<div class="hole"></div>
<p>css3遮罩 <span>点击放大显示</span></p>
<script>
$(document).on("mousemove", function(event) {
$(".hole").css({
"top": event.pageY,
"left": event.pageX
});
});
</script>
</body>
</html>
