CSS3開關門效果詳解

admin發表於2018-09-08
CSSS3

分享一段程式碼例項，它實現了利用CSS3實現的開關門效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
.door{ 
  position:relative; 
  width:400px; 
  height:300px; 
  overflow:hidden; 
  border:2px solid #000; 
  background:#000;
}
.door:before,.door:after{ 
  content:''; 
  position:absolute; 
  left:0; 
  width:0; 
  height:0; 
  overflow:hidden; 
  border-color:#000 transparent transparent transparent; 
  border-style:solid; 
  border-width:0 200px; 
  z-index:2;
  transition:all 2s ease;
}
.door:before{top:0;}
.door:after{ 
  bottom:0; 
  border-color:transparent transparent #000 transparent;
}
.door-left, .door-right{ 
  position:relative; 
  float:left; 
  width:50%; 
  height:100%; 
  background:#f00; 
  box-sizing:border-box; 
  transition:all 2s ease;
}
.door-left{ 
  border-right:2px solid #000; 
  transform-origin:0 0;
 }
.door-right{ 
   border-left:2px solid #000; 
   transform-origin:100% 0;
 }
 .door-left:before,.door-right:before{ 
   content:''; 
   position:absolute; 
   width:10px; 
   height:10px; 
   top:50%; 
   margin-top:-5px; 
   border-radius:50%; 
   background:#000;
 }
 .door-left:before{
   right:5px;
 }
 .door-right:before{
   left:5px;
 }
 .door:hover .door-left{ 
   transform:rotateY(-90deg);   
   transition:all 2s ease-out;
 }
 .door:hover .door-right{ 
   transform:rotateY(90deg);   
   transition:all 2s ease-out;
 }
 .door:hover:before,.door:hover:after{
  border-width:40px 200px;
}
</style>
</head>
<body>
<div class="door">
  <div class="door-left"></div>
  <div class="door-right"></div>
</div>
</body>
</html>

程式碼實現了我們的預期效果，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.door{ 
  position:relative; 
  width:400px; 
  height:300px; 
  overflow:hidden; 
  border:2px solid #000; 
  background:#000;
}

大門的容器，並且將其設定為相對定位，那麼它定位子元素的位移就是以它為參考。

[CSS] 純文字檢視 複製程式碼
.door:before,.door:after{ 
  content:''; 
  position:absolute; 
  left:0; 
  width:0; 
  height:0; 
  overflow:hidden; 
  border-color:#000 transparent transparent transparent; 
  border-style:solid; 
  border-width:0 200px; 
  z-index:2;
  transition:all 2s ease;
}

通過偽元素選擇器，新增兩個元素，寬高均為0px。

同時規定上下邊框尺寸為0，左右邊框為200px；一個邊框為黑色，其他邊框透明。

當滑鼠懸浮大門時，有開門效果，並且內側部分有越來越小的效果，這正是上下邊框由0到40px寬度變化形成。

為了便於觀察效果，大家可以自行設定上下左右邊框為不同的顏色，然後滑鼠懸浮就很容易理解。

[CSS] 純文字檢視 複製程式碼
.door:before{top:0;}
.door:after{ 
  bottom:0; 
  border-color:transparent transparent black transparent;
}

因為上下都有內側縮小的效果，所以偽元素需要一個位於上方一個位於下方。

[CSS] 純文字檢視 複製程式碼
.door-left, .door-right{ 
  position:relative; 
  float:left; 
  width:50%; 
  height:100%; 
  background:#f00; 
  box-sizing:border-box; 
  transition:all 2s ease;
}

設定兩扇大門的樣式。

最後規定它所有屬性的改變都以動畫方式過渡完成。

[CSS] 純文字檢視 複製程式碼
.door-left{ 
  border-right:2px solid #000; 
  transform-origin:0 0;
 }

設定左大門的有邊框為2px併為黑色。

最後設定它的原點座標是（0,0），也就是左上角；那麼大門就以左側邊框為軸旋轉。

[CSS] 純文字檢視 複製程式碼
.door-right{ 
   border-left:2px solid #000; 
   transform-origin:100% 0;
 }

和上面原理是一樣的，設定它的原點為(100%,0)，也就是大門已右側邊框為軸旋轉。

[CSS] 純文字檢視 複製程式碼
.door-left:before,.door-right:before{ 
   content:''; 
   position:absolute; 
   width:10px; 
   height:10px; 
   top:50%; 
   margin-top:-5px; 
   border-radius:50%; 
   background:#000;
 }

通過偽元素選擇器，為大門新增兩個黑點。

[CSS] 純文字檢視 複製程式碼
.door-left:before{
   right:5px;
 }
 .door-right:before{
   left:5px;
 }

設定兩個黑點的位置。

[CSS] 純文字檢視 複製程式碼
.door:hover .door-left{ 
   transform:rotateY(-90deg);   
   transition:all 2s ease-out;
 }
 .door:hover .door-right{ 
   transform:rotateY(90deg);   
   transition:all 2s ease-out;
 }
 .door:hover:before,.door:hover:after{
  border-width:40px 200px;
}

滑鼠懸浮的時候，實現大門的旋轉和上下兩個元素上下邊框尺寸的增加。

這樣就實現了視覺上的開門效果。

二.相關閱讀:

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

（2）.:before參閱CSS E::before 偽物件選擇符一章節。

（3）.z-index參閱CSS z-index屬性一章節。

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

（5）.float參閱CSS float浮動一章節。

（6）.box-sizing參閱CSS3 box-sizing一章節。

（7）.transform-origin參閱CSS3 transform-origin一章節。

（8）.transform參閱CSS3 transform一章節。

相關文章