CSS3滑鼠懸浮出現半透明遮罩層詳解

螞蟻小編發表於2017-11-20
CSSS3遮罩
本章節分享一段程式碼例項，它實現了滑鼠懸浮出現半透明遮罩效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  margin: 0;
  padding: 0;
}
.main {
  height: 300px;
  width: 200px;
  position:relative;
  border: 10px solid #ccc;
  overflow: hidden;
  margin:0px auto;
}
.box1 {
  height: 100%;
  width: 100%;
  background: green;
}
.box2 {
  height: 100%;
    width: 100%;
    position: absolute;
    text-align:center;
    line-height:300px;
    top: 0;
    left: -300px;
    background:rgba(160,100,150,0.6);
    transition: all 0.5s;
}
.main:hover .box2 {
  left: 0;
}
</style>
</head>
<body>
  <div class="main">
    <div class="box1"></div>
    <div class="box2">螞蟻部落</div>
  </div>
</body>
</html>

上面的實現了我們的要求，更多內容可以參閱相關閱讀。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
body {
  margin: 0;
  padding: 0;
}

進行簡單的初始化操作，將所有元素的內外邊距都設定為0。

[CSS] 純文字檢視 複製程式碼
.main {
  height: 300px;
  width: 200px;
  position:relative;
  border: 10px solid #ccc;
  overflow: hidden;
  margin:0px auto;
}

最外層的容器元素。

設定它的寬高分別為200px和300px。

並設定它為相對定位，這個很重要，後面會有介紹。

[CSS] 純文字檢視 複製程式碼
.box1 {
  height: 100%;
  width: 100%;
  background: green;
}

綠色背景元素。

寬高都是100%，這樣就恰好填滿整個父元素。

[CSS] 純文字檢視 複製程式碼
.box2 {
  height: 100%;
  width: 100%;
  position: absolute;
  text-align:center;
  line-height:300px;
  top: 0;
  left: -300px;
  background:rgba(160,100,150,0.5);
  transition: all 0.5s;
}

這個就是半透明的遮罩層。

長寬分別為100%，恰好填滿整個父元素。

採用絕對定位，它的定位參考物件是父元素（因為父元素採用相對定位）。

特別重要的是，left初始值為-300px，恰好被隱藏在父元素的左側。

最後設定了它的過渡效果。

[CSS] 純文字檢視 複製程式碼
.main:hover .box2 {
  left: 0;
}

滑鼠懸浮父元素，則開始過渡效果。

二.相關閱讀:

（1）.絕對定位參閱CSS absolute 絕對定位一章節。

（2）.相對定位參閱CSS position:relative 相對定位一章節。

（3）.rgba參閱CSS3 RGBA一章節。

（4）.transition參閱CSS3 transition一章節。

相關文章