css遮罩效果

标签: 遮罩效果

今天,简单了解,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>

原文链接:加载失败,请重新获取