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

伪类和伪元素

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

转载于:https://www.cnblogs.com/zhongfufen/p/4360064.html