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>

说明:图片来源于网络，如有侵权，请联系作者删除