CSS3动画，开关门

无聊练习的css动画效果

1.效果展示

2.html代码

    <div class="wrap">
        <div class="door-l">
            
        </div>
        <div class="door-r">
            
        </div>
    </div>

3.css代码

        .wrap {
            width: 470px;
            height: 270px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);   /* transform:translate 实现垂直居中 */
            background: url("images/hzw.jpg");
            perspective:1000px;   /* 加上视距效果，可展现3d效果 */
        }

        .wrap:hover .door-l{
            transform: rotateY(-130deg);
        }
        .wrap:hover .door-r{
            transform: rotateY(130deg);
        }
        .door-l,
        .door-r {
            width: 50%;
            height: 100%;
            border: 1px solid lavenderblush;
            float: left;
            box-sizing: border-box;
            position: relative;
            transition: all 0.8s;  /* 过渡动画  */
        }
        .door-l {
            transform-origin: left;   /*  旋转点设置 */
            background: url("images/namei.jpg");
            -webkit-background-size: cover;
            background-size: cover;
        }
        .door-r {
            transform-origin: right;    /*  旋转点设置 */
            background: url("images/nvdi.jpg");
            -webkit-background-size: cover;
            background-size: cover;
            background-position: right center;
        }

        /*两边门锁*/
        .door-l::after,
        .door-r::after {
            content: "";
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            border: 1px solid pink;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .door-l::after {
            right: 10px;
        }
        .door-r::after {
            left: 10px;
        }