滑鼠懸浮從中心放大和縮小的半透明遮罩層

antzone發表於2018-07-09
遮罩

分享一段程式碼例項，它實現了滑鼠懸浮元素，能夠出現遮罩層。

並且這個遮罩層能夠實現從中心放大和縮小功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.course{
  width: 255px;
  height: 300px;
  overflow: hidden;
  margin: 10px;
  background:#ccc;
  position:relative;
}
.course .zhezhao {
  display: block;
  -webkit-transition: 1s;
  width:0px;
  height:0px;
  transition: 1s;
  position:absolute;
  opacity:0.6;
  background-color:black;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.course:hover .zhezhao {
  width: 255px;
  height: 300px;
 }
</style>
</head>
<body>
  <div class="course">
    <div class="zhezhao"></div>
  </div>
</body>
</html>

相關文章