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

前言

好久没有上苹果官网了,周三用手机登录 苹果官网 的时候,发现苹果官网的导航用了自适应,并且把所有的导航都浓缩在一个打开关闭的小图标,如下图:

apple-nav

看见左上角这个两杠的东东了嘛,点击弹出导航,再点击然后隐藏,右键审查元素看了一下,用到的是svg标签

<svg x="0px" y="0px" width="100%" viewBox="0 0 96 96" class="gh-svg gh-svg-top" enable-background="new 0 0 96 96"><rect width="32" height="4" x="32" y="46" class="gh-svg-rect gh-svg-rect-top"></rect></svg>  

我突然想到了这种效果其实也是可以用伪元素:after来实现的嘛,于是就有这篇文章了。

伪类和伪元素

伪元素在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属性在一起了。

对于伪元素的研究,各位可以前往鑫哥的博客,他对伪元素的研究更加的细致和透彻→张鑫旭对伪元素研究,看完了这些文章估计你会对这类元素颇有一番醐醍灌顶的赶脚哈。qq表情

最终demo→仿苹果导航按钮
css伪元素

其实就是利用伪元素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