总结自:图解CSS3中的实战体验
以前制作手风琴效果需要依赖js脚本,功能强大的CSS3的目标伪选择器可以直接实现同样的效果。
通过目标伪类选择器“E:target”,显示和隐藏不同栏目内容:
先上一幅效果图:
全部代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
.accordinMenu{
background:#0FF;
color:#F66;
font:12px Arial, Helvetica, sans-serif;
margin:0 auto;
padding:10px;
width:500px;
}
.accordinMenu h2{
margin:5px 0;
padding:0;
position:relative;
}
.accordinMenu h2:before{/*制作三角效果*/
border:5px solid #33C;
border-color:#006;
content:"";
position:absolute;
right:10px;
top:15px;
width:0;
}
.accordinMenu h2 a{
background:#8f8f8f;
background: -moz-linear-gradient(top,#cecece,#8f8f8f);
background:-o-linear-gradient(top,#cecece,#8f8f8f);
background:linear-gradient(top,#cecece,#8f8f8f);
border-radius:5px;
color:#424242;
display:block;
font-size:13px;
margin:0px;
padding:10px 10px;
text-shadow: 2px 2px 2px #aeaeae;
text-decoration:none;
}
.accordinMenu :target h2 a, /*目标标题的效果*/
.accordinMenu h2 a:focus,
.accordinMenu h2 a:hover,
.accordinMenu h2 a:active{
background:#2288dd;
background:-moz-linear-gradient(top,#6bb2ff,2288dd);
background:-webkit-gradient(linear, left top, left bottom,from(#6bb2ff),to(#2288dd));
background:-webkit-linear-gradient(top,#6bb2ff,#2288dd);
background:linear-gradient(top,#6bb2ff,#2288dd);
color:#FFF;
}
.accordinMenu p{
margin:0;
height:0;/*默认栏目高度为0,达到隐藏效果*/
overflow:hidden;
padding:0 10px;
-moz-transition:height: 0.5s ease-in;
-webkit-transition: height: 0.5s ease-in;
-o-transition:height: 0.5s ease-in;
transition: height: 0.5s ease-in;
}
/*这部分是显示内容 的关键代码*/
.accordinMenu :target p{/*展开对应目标内容*/
height:100px;
overflow:auto;
}
.accordinMenu :target h2:before{/*展开时标题三角效果*/
border-color:transparent transparent transparent #fff;/*四个三角构成一个正方形,可以将其他三个参数依次改为其他颜色可以看明白实现效果*/
}
</style>
</head>
<body>
<div class="accordinMenu">
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div >
<div class="menuSection" id="promotion">
<h2><a href="#promotion">promotiond</a></h2>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</br>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</br></p>
</div>
<div class="menuSection" id="event">
<h2><a href="#event">event</a></h2>
<p>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</br>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</br>cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</br>cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</br>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</br>cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</br>cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</br>cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</br>cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</br>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</br>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</br>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</br>ccccccccccccccccccccccccc</p>
</div>
</div>
</body>
</html>
其中(摘自网络):
一、
:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下:
#example:before {
content: “#”;
color: red;
}
#example:after {
content: "KaTeX parse error: Expected 'EOF', got '}' at position 20: … color: red; }̲ 这段代码会在#example…’,插入的行内元素是作为#example的子元素,效果如下:
Here is the example content
需要注意的是如果没有content属性,伪类元素将没有任何作用。但是可以指定content为空,同时正如前面所说,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到,这就是为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作。
#example:before {
content: “”;
display: block;
width: 100px;
height: 100px;
}
伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性,比如字体等。
除了插入文字内容,还可以指定其他内容:
p:before {
content: url(‘img.jpg’);
}
a:after {
content: attr(href);
}
attr()函数会返回指定元素对应属性的值
二、CSS3 transition 属性:
定义和用法
transition 属性是一个简写属性,用于设置四个过渡属性:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
默认值: all 0 ease 0
继承性: no
版本: CSS3
JavaScript 语法: object.style.transition=“width 2s”
语法
transition: property duration timing-function delay;
值 描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
transition 提供一种运动渐变的效果:
下面这个是一个演示实例:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
三、目标伪类应用场景:
其中几项效果使用js效果会更好,因为纯CSS可能存在潜在的易用性和可用性问题。