CSS3demo

css3手風(fēng)琴菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 960px;
            height: 280px;
            margin: 100px auto;
            list-style: none;
            border: 1px solid #000;
            overflow: hidden;
        }
        ul li {
            width: 160px;
            height: 100%;
            float: left;
            transition: all 0.5s;
            /*border: 1px solid #000;*/
            /*box-sizing: border-box;*/
        }
        ul:hover li{
            width: 100px;
        }
        ul li:hover{
            width: 460px;
        }

    </style>
</head>
<body>
<ul>
    <li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
    <li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
    <li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
    <li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
    <li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
    <li><img src="https://img.alicdn.com/tfs/TB1YJsYTyrpK1RjSZFhXXXSdXXa-520-280.jpg_q90_.webp" alt=""></li>
</ul>
</body>
</html>

2d過渡照片墻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            width: 100%;
            height: 400px;
            list-style: none;
            background-color: skyblue;
            position: relative;
        }
        .wrap li{
            width: 150px;
            height: 220px;
            position: absolute;
            box-shadow: 0 0 10px rgba( 0,0,0,0.6);
            transition: all 1s;
        }
        .wrap li:nth-child(1){
            left: 100px;
            top: 80px;
            transform: rotate(30deg);
        }
        .wrap li:nth-child(2){
            left: 300px;
            top: 90px;
            transform: rotate(-10deg);
        }.wrap li:nth-child(3){
             left: 500px;
             top: 100px;
             transform: rotate(50deg);
         }
        .wrap li:nth-child(4){
              left: 700px;
              top: 77px;
              transform: rotate(-80deg);
          }
        .wrap li:nth-child(5){
            left: 1000px;
            top: 77px;
            transform: rotate(170deg);
        }
          .wrap li:hover {
            /*transform: rotate(0deg) scale(1.5);*/
            transform: scale(1.5);
            /*因?yàn)闀采w所以不用寫rotate*/
            z-index: 1;
        }
        .wrap li img{
            width: 100%;
        }

    </style>
</head>
<body>
<ul class="wrap">
    <li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1358434829,490132153&fm=27&gp=0.jpg"></li>
    <li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1358434829,490132153&fm=27&gp=0.jpg"></li>
    <li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1358434829,490132153&fm=27&gp=0.jpg"></li>
    <li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1358434829,490132153&fm=27&gp=0.jpg"></li>
    <li><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1358434829,490132153&fm=27&gp=0.jpg"></li>
</ul>

</body>
</html>

css3二級菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            margin: 100px auto;
            width: 500px;
            height: auto;
            border: 1px solid #000;
        }

        .box {
            width: 500px;
            height: 50px;
            text-align: center;
            list-style: none;
        }

        .box > li {
            width: 100px;
            height: 50px;
            line-height: 50px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.3);
            float: left;
            transition: all 0.5s;
        }

        .box > li:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

        .stage {
            list-style: none;
            perspective: 500px;
        }

        .stage > li {
            transform: rotateY(180deg);
            opacity: 0;
            height: 0;
            background-color: rgba(0, 0, 0, 0);
            transition: all 1s;
        }

        .box > li:hover .stage > li {
            transform: none;
            opacity: 1;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.6);
        }

        .box > li:hover .stage > li:nth-child(1) {
            transition-delay: 0ms;
        }

        .box > li:hover .stage > li:nth-child(2) {
            transition-delay: 200ms;
        }

        .box > li:hover .stage > li:nth-child(3) {
            transition-delay: 400ms;
        }

        .box > li:hover .stage > li:nth-child(4) {
            transition-delay: 600ms;
        }

        .box > li .stage > li:nth-child(4) {
            transition-delay: 0ms;
        }

        .box > li .stage > li:nth-child(3) {
            transition-delay: 200ms;
        }

        .box > li .stage > li:nth-child(2) {
            transition-delay: 400ms;
        }

        .box > li .stage > li:nth-child(1) {
            transition-delay: 600ms;
        }

        .stage > li > a {
            color: #fff;
        }

        .text {
            background-color: lightgoldenrodyellow;
            text-indent: 2em;
            line-height: 30px;
            padding: 10px;
        }

    </style>
</head>
<body>
<div class="wrap">
    <ul class="box">
        <li>一級菜單
            <ul class="stage">
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
            </ul>
        </li>
        <li>一級菜單
            <ul class="stage">
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
            </ul>
        </li>
        <li>一級菜單
            <ul class="stage">
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
            </ul>
        </li>
        <li>一級菜單
            <ul class="stage">
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
            </ul>
        </li>
        <li>一級菜單
            <ul class="stage">
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
                <li>
                    <a >二級菜單</a>
                </li>
            </ul>
        </li>
    </ul>
    <div class="text">
        首先先設(shè)置所有的二級菜單沿Y軸旋轉(zhuǎn)180度,在透明的情況下看不見.當(dāng)鼠標(biāo)懸停在一級菜上時(shí)清除當(dāng)前的Y軸旋轉(zhuǎn)產(chǎn)生旋轉(zhuǎn)效果,設(shè)置當(dāng)前的透明度為0當(dāng)鼠標(biāo)懸停在一級菜單當(dāng)前的透明度過渡為1,并且為每個(gè)二級菜單設(shè)置延遲產(chǎn)生時(shí)間差,當(dāng)鼠標(biāo)移出時(shí)反向設(shè)置延遲.注意點(diǎn),因?yàn)樵O(shè)置display:none時(shí)無法產(chǎn)生過渡效果.當(dāng)設(shè)置visibility:
        hidden;和opactiy:0;雖然讓元素隱藏但是當(dāng)前的位置被占據(jù),當(dāng)鼠標(biāo)經(jīng)過雖然看不見元素但卻有位置保留的二級菜單是會觸發(fā)效果,因此為所有的二級菜單設(shè)置height:0,來取消占位,當(dāng)鼠標(biāo)懸停在一級菜單時(shí)二級菜單的height:50;(高度慢慢展現(xiàn)),從而達(dá)到完美效果.

    </div>
</div>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容