css——手风琴效果、翻转菜单效果

手风琴

   <style>
        ul {
            width: 810px;
            height: 300px;
        }
        ul li{
            width: 270px;
            height: 300px;
            border: 1px solid #000;
            float: left;
            box-sizing: border-box;
            list-style: none;
            transition: width 1s;
        }
        ul:hover li{
            width: 50px;
        }
        ul li:hover{
            width: 710px;
        }
    </style>

<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

翻转菜单

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 600px;
            height: 60px;
            background-color: grey;
            margin: 200px auto;
        }

        .father>li {
            width: 170px;
            height: 60px;
            line-height: 60px;
            background-color: #000;
            margin-left: 22.5px;
            list-style: none;
            float: left;
            font-size: 35px;
            color: white;
            text-align: center;
        }

        .son>li {
            background-color: lightcoral;
            width: 170px;
            line-height: 60px;
            list-style: none;
            float: left;
            font-size: 35px;
            color: white;
            text-align: center;
            transform: rotateY(180deg);
            transition: all 1s;
            opacity: 0;
            perspective: 300px;
        }

        .father>li:hover .son>li {
            transform: none;
            opacity: 1;
        }

        .father>li:hover .son>li:nth-of-type(1) {
            transition-delay: 0ms;
        }

        .father>li:hover .son>li:nth-of-type(2) {
            transition-delay: 100ms;
        }

        .father>li:hover .son>li:nth-of-type(3) {
            transition-delay: 200ms;
        }

        .father>li:hover .son>li:nth-of-type(4) {
            transition-delay: 300ms;
        }
        .father>li .son>li:nth-of-type(4) {
            transition-delay: 0ms;
        }
        .father>li .son>li:nth-of-type(3) {
            transition-delay: 100ms;
        }
         .father>li .son>li:nth-of-type(2) {
            transition-delay: 200ms;
        }
         .father>li .son>li:nth-of-type(1) {
            transition-delay: 300ms;
        }

    </style>

<body>
<ul class="father">
    <li>点我
        <ul class="son">
            <li>hello</li>
            <li>hello</li>
            <li>hello</li>
            <li>hello</li>
        </ul>
    </li>
    <li>点我
        <ul class="son">
            <li>hello</li>
            <li>hello</li>
            <li>hello</li>
            <li>hello</li>
        </ul>
    </li>
    <li>点我
        <ul class="son">
            <li>hello</li>
            <li>hello</li>
            <li>hello</li>
            <li>hello</li>
        </ul>
    </li>
</ul>
</body>

css——手风琴效果、翻转菜单效果

猜你喜欢