css3實現開門動畫

css3實現開門動畫效果

今天我們使用css3實現以下開門動畫，首先我們來看一下效果圖

接下來我們來實現一下這個效果

1. 先進行布局，布局的實現由很多種，這里我們需要position和float進行布局，首先先把門放到正中央，我們可以利用以下代碼實現

        width: 300px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -150px;

2. 對於上述代碼來說就是這樣的
   

3. 下來就可以設置背景，設置左右門了，門的div和左右門的div是父子結構，我們只需要對左右門設置了左浮動，因為我們需要給左右門的右邊和左邊設置邊框，使其呈現門縫效果，因此我們需要把左右門設置成盒子模型即box-sizing:border-box

        box-sizing:border-box;
        float:left;

4. 接下來我們就需要給左右門設置旋轉效果了，首先需要把左右門設置變形基准點，需要把左門的基准點設置為left center；右門設置為基准點設置為right center

    div.left_door{
        transform-origin:left center;
        border-right:1px solid rgb(8, 8, 8);
    }
    div.right_door{
        transform-origin:right center;
        border-left:1px solid rgb(8, 8, 8);
    }

5. 下來就是當鼠標划過門的時候，左右門的y軸進行旋轉實現開門效果

    div.door:hover div.left_door{
        transform:rotateY(-140deg);    
    }

    div.door:hover div.right_door{
        transform:rotateY(140deg);
    }

6. 但是現在你會發現，它的旋轉效果和我們預期的並不一樣，這是因為我們看到的是一個3d呈現的效果，可是到現在我們並沒有為其設置過3d效果；因此我們好需要在門上設置一個屬性，即perspective屬性，這個屬性是用來設置鏡頭(就好比我們的眼睛）距離元素平面的位置，它的顯示方式是近大遠小的顯示方式；如果不清楚的小伙伴可以去網上查一下這個屬性的解析過程。
7. 至此我們的效果就出現了，下面是源代碼

    * {
        margin: 0;
        padding: 0;
    }
    ul{
        list-style-type:none;
    }

    /*門里面*/
    div.door{
        width: 300px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -150px;
        background-image: url(img/武漢加油.jpg);
        background-size:100% 100%;
        perspective: 800px;
    }
    /*左門/右門*/

    div.left_door, div.right_door{
        width:150px;
        height:300px;
        background-color:crimson;
        box-sizing:border-box;
        float:left;
        z-index: 1;
        transition:all 2s ease;
    }
    div.left_door{
        transform-origin:left center;
        border-right:1px solid rgb(8, 8, 8);
    }
    div.right_door{
        transform-origin:right center;
        border-left:1px solid rgb(8, 8, 8);
    }

    /*門把手*/

    div.left_door ul li, div.right_door ul li{
        width:50px;
        height:50px;
        border:2px solid #332211;
        border-radius:50%;
    }
    div.left_door ul li, div.right_door ul li{
        margin-top:123px;
    }

    div.left_door ul li{
        margin-left:96px;
    }

    /*使用css變形功能*/
    
    div.door:hover div.left_door{
        transform:rotateY(-140deg);    
    }

    div.door:hover div.right_door{
        transform:rotateY(140deg);
    }

    <div class="door">
        <div class="left_door">
            <ul>
                <li></li>
            </ul>
        </div>
        <div class="right_door">
            <ul>
                <li></li>
            </ul>
        </div>
    </div>