css遮罩效果

最新推荐文章于 2024-05-30 16:48:43 发布

挽留早已看淡

最新推荐文章于 2024-05-30 16:48:43 发布

阅读量713

点赞数 3

分类专栏：效果一小步文章标签：遮罩效果

本文链接：https://blog.csdn.net/weixin_42590100/article/details/80881148

版权

效果一小步专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

如果有需要做网页的,请加我q1471503422哦

挽留早已看淡

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
css遮罩效果

今天，简单了解，css做的简单遮罩效果，具体如下图下边是它的html结构<!doctype html><html><head><meta charset="utf-8"><title>鼠标悬停遮罩</title><script src="./jquery-3.3.1.min.js"></...
复制链接

扫一扫