使用CSS3伪类选择器实现简单手风琴效果，与其功能的介绍

最新推荐文章于 2019-07-13 23:14:52 发布

shalltear

最新推荐文章于 2019-07-13 23:14:52 发布

阅读量348

点赞数

文章标签： CSS3 手风琴 HTML

本文链接：https://blog.csdn.net/zmdmwh/article/details/85212954

版权

1.展示

2.原理

主要使用了C3选择器中的两个：

①:not()：不包含，如div:not(.test)，就是在div中选中不包含有test类的，例如可以配合E:not(:last-of-type)来排除掉最后一个元素并选中剩余的;

②:target：目标的id变为location.hash的值时，也就是锚点选中它时来选中它的一种选择器，例如锚点可以通过标签的href里加#来改变。

3.测试时遇到两点需要注意的问题

①给元素设置ID时不能用单个的字母，不然锚点锚不上;

②想给效果加上过渡持续时间时发现，目前显示等属性不受支持。因为是基于数值和时间的计算（长度，百分比，角度，颜色能转换为数值）。

4.源码

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>C3手风琴效果</title>
    <style type="text/css">
        :root,
        body,
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            user-select: none;
            font-size: 24px;
            text-align: center;
            text-decoration: none;
        }

        .wrapper {
            margin: 10px auto;
            width: 300px;
            height: 400px;
            border: 2px solid lightblue;
            background-color: beige;
        }

        a:not([id]) {
            display: block;
            color: rgb(0, 172, 202);
            width: 100%;
            margin-top: 3px;
            background-color: rgb(109, 255, 206);
            border-radius: 10px;
            cursor: pointer;
            transition-duration: 0.3s;
        }

        a:hover {
            border: 1px solid transparent;
        }

        a:active {
            border: 2px solid transparent;
        }

        li {
            margin: 2px auto;
            width: 85%;
            font-size: 16px;
            background-color: rgb(115, 206, 241);
        }

        ul:not(:target) {
            display: none;
        }

        div:not([class]) {
            color: rgb(0, 89, 255);
            font-size: 30px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <a href="#" id="miao">手风琴</a>
        <a href="#aaa">AAA</a>
        <ul id="aaa">
            <li>帅</li>
            <li>帅帅帅</li>
            <li>帅帅帅帅帅</li>
        </ul>
        <a href="#bbb">BBB</a>
        <ul id="bbb">
            <li>酷</li>
            <li>酷酷酷</li>
            <li>酷酷酷酷酷</li>
        </ul>
        <a href="#ccc">CCC</a>
        <ul id="ccc">
            <li>美</li>
            <li>美美美</li>
            <li>美美美美美</li>
        </ul>
        <a href="#ddd">DDD</a>
        <ul id="ddd">
            <li>身体好</li>
            <li>身体好</li>
            <li>身体好</li>
        </ul>
    </div>
    <script src="./js/test.js"></script>
</body>

</html>