用纯css样式的方法来制作如下点击展开的动态效果
这种效果是如何实现的呢 我们一起来写一下;
首先先将要完成完成形态写出来如下:
然后将p的高度设置为0 因为虽然高度为0但是里面还是有内容会撑开高度 所有要加一个overflow:hidden去隐藏它;
再用target去触发点击展开的效果;
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
.box{
width:500px;
margin:0 auto;
}
.menu{
margin-bottom:15px;
}
.menu h2 a{
display:inline-block;
width: 100%;
height:40px;
border-radius:10px;
background:#ccc;
text-decoration:none;
line-height:40px;
padding-left:10px;
box-sizing:border-box;
position:relative;
}
.menu p{
margin-top:15px;
height:0;
overflow:hidden;
/* word-break:break-all; */
}
.menu h2 a:after{
content:"";
display:block;
border:5px solid #fff;
border-color:transparent transparent transparent #fff;
position:absolute;
right:10px;
top:15px;
}
.menu:target a:after{
transition:0.1s;
transform:rotate(90deg);
}
.menu h2 a:hover,
.menu:target a{
color:#fff;
background-color:blue;
}
.menu:target p{
height:100px;
overflow:auto;
}
</style>
</head>
<body>
<div class="box">
<div class="menu" id="one">
<h2><a href="#one">one</a></h2>
<p>
中国百万人口城市近百个引关注！百万人口城市20年翻倍，2013年，广东百万人口以上的城市有8个，江苏也有8个，浙江有5个，三省就占据了全国的四分之一以上。未来我国人口300万以上的大城市、特大城市将继续快速增长，而人口超过100万的城市数量未必会继续快速增。按照我国目前人口流动的态势，2012年以后，中国由城镇化向都市化演变，人口选择性地流向一、二线大城市。许多三四线城市的人口增长乏力，甚至面临着外流的压力。
</p>
</div>
<div class="menu" id="two">
<h2><a href="#two">two</a></h2>
<p>
中国百万人口城市近百个引关注！百万人口城市20年翻倍，2013年，广东百万人口以上的城市有8个，江苏也有8个，浙江有5个，三省就占据了全国的四分之一以上。未来我国人口300万以上的大城市、特大城市将继续快速增长，而人口超过100万的城市数量未必会继续快速增。按照我国目前人口流动的态势，2012年以后，中国由城镇化向都市化演变，人口选择性地流向一、二线大城市。许多三四线城市的人口增长乏力，甚至面临着外流的压力。
</p>
</div>
<div class="menu" id="three">
<h2><a href="#three">three</a></h2>
<p>
中国百万人口城市近百个引关注！百万人口城市20年翻倍，2013年，广东百万人口以上的城市有8个，江苏也有8个，浙江有5个，三省就占据了全国的四分之一以上。未来我国人口300万以上的大城市、特大城市将继续快速增长，而人口超过100万的城市数量未必会继续快速增。按照我国目前人口流动的态势，2012年以后，中国由城镇化向都市化演变，人口选择性地流向一、二线大城市。许多三四线城市的人口增长乏力，甚至面临着外流的压力。
</p>
</div>
</div>
</body>
</html>
是不是很简单 手动滑稽~
1161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
