利用僞元素仿蘋果手機官網導航

僞類和僞元素

僞元素在css3的寫法是::after，都是以雙冒號開頭，而css2的寫法則是這樣:after，而且須要把僞元素（pseudo element）和僞類（pseudo classes）區分開來，他們擁有僞類的寫法，可是卻不是僞類，目前已知的僞元素就只有5個，分別是before,after,first-line,first-letter,selection，更多詳情請點擊這裏→pseudo elements通常狀況下咱們見得最多得就是僞類，好比咱們一開始寫css重置樣式的時候最最最經常使用到的是連接重置：

a:hover,
a:link,
a:visited,
a:active {
	text-decoration:none;
}

這個就是典型的僞類，關於更多僞類知識，不妨點擊右側→Pseudo-classes。

僞元素用途

僞元素的用法目前最多的應該是 清除浮動、圖標製做這些，可是無論是當作什麼用途，其真正意義應該是爲css生成內容助力，通常這些用到僞元素的地方都會用到content內容生成屬性，因此暫且就這麼認爲吧，雖然:selection選擇僞元素不常跟，可是對於after,before這種經常使用僞元素就常常跟content屬性在一塊兒了。

對於僞元素的研究，各位能夠前往鑫哥的博客，他對僞元素的研究更加的細緻和透徹→張鑫旭對僞元素研究，看完了這些文章估計你會對這類元素很有一番醐醍灌頂的趕腳哈。

最終demo→仿蘋果導航按鈕

其實就是利用僞元素before,after來構造一個圖形，由於沒有利用任何的圖片都是基於css代碼來寫，所以當點擊按鈕以後的代碼須要藉助 transform 變形屬性。
當前按鈕的效果

點擊以後的效果

最終效果以下：

css

.btn{ display:inline-block;width:100px;height:100px;text-align:center; opacity:initial}
.cur,.hover{
	position:relative;
	display:inline-block;
	vertical-align:top; 
	height:4px;
	width:35px;
	top:48px;
}
.cur:before,.cur:after,.hover:before,.hover:after{
	position:absolute;
	content:"";
	background-color:#fff;
	height:100%;
	width:100%;
	
}
.cur:before{
	transform:translateY(-200%);	/*當前按鈕，Y軸向上移動-200%，由於span的高度爲4px，所以span總體向上移動4px*/
    -webkit-transform:translateY(-200%);	
}
.cur:after{
	transform:translateY(200%); 	/*同理，span總體向下移動4px*/
    -webkit-transform:translateY(200%);	
}
.hover{ background-color:transparent;}
.hover:before{
	transform:translateY(0) rotate(45deg);			/*點擊以後，Y軸恢復到原點座標，而後順時針旋轉45°角*/
	-webkit-transform:translateY(0) rotate(45deg);
}
.hover:after{
	transform:translateY(0) rotate(-45deg);			/*點擊以後，Y軸恢復到原點座標，而後逆時針旋轉-45°角*/
	-webkit-transform:translateY(0) rotate(-45deg);
}

html+JS

html
<div class="top">
	<a href="javascript:void(0)" class="btn"><span class="cur"></span></a>
</div>

JQ
<script type="text/javascript">
$(".btn").click(function(){
	$("span").toggleClass("hover");
});
</script>

表格佈局

你也許確定猜測不到這貨還能夠來構造一個僞造的表格，這真心不是蓋的，不信自個前往美團手機網，如圖：

這個三列的表格就是用:after+:before僞元素來僞造出來的，僞元素這個稱號給得真心沒有白給。具體的樣式，各位自個去研究哈，大同小異，記得不要忘記content

後話

固然僞元素的應用還不止這些小應用，估計還應該更有大有做爲的，重複發揮咱們的想象力，也許哪天構造個天馬行空的東東出來也不必定哦，期待你在評論貼出你所認爲牛逼的僞元素應用哈。

轉自：http://xiaoho.com/?p=890