利用伪元素仿苹果手机官网导航

伪类和伪元素

伪元素在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