css3 手风琴

1、看了网上很多关于css的手风琴案例，但是都没有讲到相关的原理。

主要原理1. 利用target属性。2.锚点链接。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴</title>
<style>
*{transition:all 2s linear}
ul{wdith:700px;}
li{list-style:none;margin-bottom:20px;width:700px}
li a{color:#fff;text-decoration:none;width:700px;height:50px;border-radius:20px;padding: 0 10px;line-height:50px;display:block;position:relative;text-shadow:2px 2px 1px #eee;font-size:30px;font-weight:900;background:linear-gradient(to right,#999,#FFC,#F6F)}

span{border:5px solid transparent; border-top-color:#fff;border-bottom:none;width:0;position:absolute;top:23px;right:5px; transition: all 1s linear}
li a:hover{background:linear-gradient(to left,#F99, #FC3, #93C)}
a:hover span{transform:rotate(-90deg)}
p{width:100%;height:0;overflow:hidden}
p:target{height:150px;transition:all 0.5s linear;}

/*将四个角的颜色都写出来，可以看出来，是在这个正方形的中心点旋转的，当旋转90deg时，上面的角会到右边,所以看起来像下来的感觉

当下边框不存在的时候，高度会发生变化，中心点也会发生变化*/
</style>
</head>

<body>
<ul>
<li>
<a href="#one">brand<span></span></a>
<p id="one">》《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗</p>
</li>
<li>
<a href="#two">brand<span></span></a>
<p id="two">》《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗</p>
</li>
<li>
<a href="#three">brand<span></span></a>
<p id="three">》《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗</p>
</li>
</ul>
</body>
</html>