CSS3-手风琴效果

最新推荐文章于 2024-07-15 23:16:45 发布

前端要前沿

最新推荐文章于 2024-07-15 23:16:45 发布

阅读量515

点赞数 1

分类专栏： html5+css3 文章标签： css3 手风琴效果

本文链接：https://blog.csdn.net/liangsjss2011/article/details/46915221

版权

html5+css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

知识点
1、border-radius:0 0 5px 5px 顺时针方向设置
2、三角的实现
a 、width:0 ;height:0 ;content=”“;
b、border:5px solid #FFF;
c、border-color:transparent transparent transparent #FFF; 顺时针方向
3、:target使用
有URL指向的元素才可以使用:target来替代，且只有点击链接时才会触发
如.例子中menuItem 被A标记所指向，所以使用menu :target h2:before
4、布局方式及A标记的链接指向问题（指向上级ID）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css3</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style type="text/css" media="screen">
    .menu{width:500px;background:#fff;color:#333;margin:0 auto;padding:15px;}
    .menuItem{margin:5px 0;}
    .menu h2{position:relative;padding:0;margin:0;}
    .menu h2:before{position:absolute;right:10px;top:23px;
     height:0;content:"";width:0;border:5px solid #FFF;border-color:#FFF transparent transparent;}
    .menu h2 a{height:30px;line-height:30px;padding:10px;color:#fff;font-size:16px;font-weight:bold;display:block;text-decoration:none;background:#006fcd;border-radius:5px 5px 0 0;}
    /*.menuItem{width:500px;background:#fff;color:#333;margin:0 auto;padding:15px;}
    .menu p{height:0px;padding:0 5px;overflow:hidden;-moz-transition: height 0.5s ease-in;-webkit-transition:height 0.5s ease-in;transition:height 0.5s ease-in;}*/
    .menu p{margin:0;display:none;height:80px;padding:20px;overflow:hidden;
            -moz-transition: height 0.5s ease-in;
            -webkit-transition:height 0.5s ease-in;
            transition:height 0.5s ease-in;
    }
    .menu :target h2:before{border-color:transparent transparent transparent #006fcd;}
    .menu :target h2 a{background:#FFF;color:#006fcd;border-left:1px solid #006fcd;border-right:1px solid #006fcd;border-top:1px solid #006fcd;border-radius:3px 3px 0 0 ;}
    .menu :target p{display:block;border:1px solid #006fcd;border-radius:0 0 3px 3px;}


</style>
<body>
<div class="menu">
    <div class="menuItem" id="A">
        <h2><a href="#A" >A</a></h2>
        <p>A IS BEST </p>
    </div>
    <div class="menuItem" id="B">
        <h2><a href="#B" >B</a></h2>
        <p>B IS GOOD </p>
    </div>
    <div class="menuItem" id="C">
        <h2><a href="#C" >C</a></h2>
        <p>C IS NOT BAD </p>
    </div>
</div>

</body>
</html>