CSS3目标伪类选择器--实现简单手风琴效果

最新推荐文章于 2024-08-13 14:51:58 发布

抽象空间

最新推荐文章于 2024-08-13 14:51:58 发布

阅读量2.2k

点赞数 1

分类专栏： web前端文章标签： css3

本文链接：https://blog.csdn.net/baidu_33864675/article/details/50619998

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

总结自：图解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: \dots color: red; }̲ 这段代码会在#example\dots$ ’，插入的行内元素是作为#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>

三、目标伪类应用场景：
这里写图片描述