css遮罩效果
程序员文章站
2023-12-25 18:43:27
...
今天，简单了解，css做的简单遮罩效果，具体如下图
下边是它的html结构
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停遮罩</title>
<script src="./jquery-3.3.1.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("./xiaobai.jpg") no-repeat left top;
background-size: cover;
overflow: hidden;
}
.hole {
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
/* 9999em可选的阴影大小*/
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%;
}
/*:active向活动的链接添加特殊的样式。*/
.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;
}
</style>
</head>
<body>
<div class="hole"></div>
<script>
$(document).on("mousemove", function(event) {
$(".hole").css({
"top": event.pageY,
"left": event.pageX
});
});</script>
</body>
</html>