CSS3制作手风琴——CSS3target的应用

1、今天，你将学习使用css3的另一个属性:target来制作一个非常简单的动画手风琴的效果。在具体动手之前，我们一起来简单的了解一下这 个 “:target”。css3 target伪类的简介css3 target伪类是众多实用的css3特性中的一个。它用来匹配文档（页面）的uri中某个标志符的目标元素。具体来说，uri中的标志符通常 会包含一个”字符，然后后面带有一个标志符名称，比如“#branct , target就是用来匹配id为“brand”的元素的。现在在页面中，点击一个id链接后，页面只会跳转到相应的位置，但是并不会有比较明显的ui标识，使用:target伪类可以像:hover等伪类

2、一 样对目标元素定义样式。因为我们讨论的是有关于css3的属性，它支持所有现代浏览器，但在ie6-8下无法运行。因此今天我们这个效果在ie6-8下是无法正常运行。 这是一件烦人的事情，因为ie所占份额还是相当的大的，但这并不会阻碍我们学习的热情。我们可以先来看看今天我们要实现的效果:lor«<ndolof m wm< coamcmutmd do mismod tempermomxmuubimca ubons nm utcommodo comgu* oms mtt ere心r mm xnuctmt vwc*jm color tv g at 2, pmnurhtml mark

3、up :<div class二'accordionmenuh><div class=menusection" id = nbrand”><h2xa href="#brandn>brand</a></h2><p>content for bransv/p></div><div class=wmenusectiort id二“promotion”><h2><a href = ,#promotionn>promotion</a></

4、h2><p>content for promotionv/p></div><div class=wmenusection" id = "event"><h2><a h ref= ”#eve nt” > event </a ></h2><p>content for event</p></div></div>我使用了 “div.accordionmenit'包装了手风琴所有块；“div.menusection”包含手风

5、琴每块的标题和主内容把手风琴每块的标题定义为“h2”手风琴每块主内容放在了一个“p”中，并与52”相邻，当然大家也可以把主内容放置在一个udivn中，容易管理此处最关键的一点是正如前面介绍“target” ,我们使用“target”来达到点击展开动画效果，我们每一块需要id来配合使用，因此我们在手 风琴中的每一块中定义了一个id号，并且在标题中的“va>”链接的“href”属性链接了相对应块的id号。bmndloren dolor it amet comectefurebu sed do cshmod tetapov .promotionloren ipran dokw hl anxt.

6、 comecietur adptsiarg dk seddo ornmod tet&poc .ewnll«ea doior stf amet. comectetnrdu sed do <*nmod trapoc css code :.accordionmenu font: 12 px arialzverda na,sa nsserif;color:#424242;backgro un d:#fff;padding:10px;width:500px;margin:0 auto;.accordionmenu h2 margin:5px 0;paddi ng:0;positi

7、on:relative;.accordionmenu h2:before content:11;border:5px solid #fff;border-color:#fff tran sparent transpare nt;width:0;height:o;positi on:absolute;right:10px;top:15px;.accordionmenu h2 a fon t-size:13px;display:block;fon t-weight: normal;color:#424242;text-shadow:2px 2px 2px #aeaeae;text-decorati

8、 on:none;margin:0;padding:10px;backg rou nd :#8f 8f 8f;background:-webkit-lineargradient(top #cecece, #8f8f8f);border-radius:5px;filter: progidximagetransform.microsoft.gradient(startcolorstr=#ffcecece, endcolorstr=#f8f8f8f)h;.accordionmenu :target h2 a background:#2288dd;background: -webkit-linear-

9、gradient( top, #6bb2ff #2288dd);color:#fff;.accordionmenu p padding:0 lopx;margin:0;height:0;overflow:hidde n;transition:height 0.5s ease-in;.accordionmenu :target p overflow:auto;height:100px;.accordionmenu :target h2:before border-color:tra nspare nt tran spare nt tran sparent上面是实现手风琴效果的所有样式代码，其中最

10、为关键的是:1、实现动态效果.accordionmenu p padding:0 lopx;margin:0;height:o;overflow:hidde n;transition:height 0.5s ease-in;我们在每块面板内容上使用了 css3的transition来实现改变面板展开时高度的平滑过渡。2、制作面板标题.accordion menu h2 a font-size:13px;display:block;fon t-weight: nor mal; color:#424242;text-shadow:2px 2px 2px #aeaeae; text-decorati

11、 on:none;margin:0;padding:10px;backg ro u nd :#8f 8f 8f;background:-webkitlineargradient(top #cececez #8f8f8f);border-radius:5px;filter: progidximagetransform.microsoft.gradient(startcolorstr=#ffcecece, endcolorstr=#f8f8f8f)h;.accordion menu :target h2 a,.accordionmenu h2 a:focusr.accordionmenu h2 a

12、:hover;.accordionmenu h2 a:active background:#2288dd;background: -webkit-linear-gradient( top, #6bb2ff #2288dd);color:#fff;此处我们主要使用了 css的gradients border-radiusv text-shadow等属性制作了面板标题的默认状态和当前状态的样式风格。3、制作三角效果.accordionmenu h2:before content:""border: 5px solid #fff;border-color: #fff tran s

13、parent tran spare nt;width: 0;height: 0;positi on:absolute;right: lopx;top: 15px;.accordionmenu :target h2:before border-color: tran spare nt tran sparent tran sparent #fff;上面样式主要使用了 css3的伪类bofore"配合"border"制作三角形4、展开样式.accordionmenu :target p overflow: auto; height:100px;效果loetmdolor m amt< constcmurufduftcn uumco aoth ntw utcommooo(xm 3 «ur«eigm 1occmch (upedmm maumlin 3, goftcu dewunt moatsnam »d lobcrum兼容的浏览器因为我们这里主要