注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

使用伪元素的一个例子 (转)  

2015-04-21 11:25:07|  分类: HTML5CSS3WEBAPP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

前言

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

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 变形属性。 
当前按钮的效果 
点击之前 
点击之后的效果 
点击之后 
最终效果如下: 
点击之后

.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


  评论这张
 
阅读(227)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017