CSS3实现开门大吉效果

开门大吉效果的实现的原理

1. 使用css3 中的rotate属性实现旋转效果
2. 使用css3中的transform-origin 属性实现门开的效果

一、HTML 页面布局代码

<section>
    <div class="door-left">
    </div>
    
    <div class="door-right">
    </div>
</section>
复制代码

二、CSS 样式代码

实现左右两扇门的效果，主要使用的是定位的方式，把两扇门定位的左右两边。 旋转的关键效果，鼠标经过盒子时，rotateY 旋转即可实现开门效果。

    section {
        position: relative;
        width: 450px;
        height: 300px;
        border: 1px solid #000;
        margin: 100 auto;
        background: url(../img/animal.jpg) no-repeat;
        background-size: 100% 100%;
        perspective: 1000px; // 给父盒子添加透视效果，使其具有立体效果
    }
    
    .door-left,.door-right {
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
        background: url(./door.jpg) no-repeat;
        background-size: 100% 100%;
        transition: all 1s; // 实现动画效果
    }
    
    .door-left {
        left: 0;
        border-right: 1px solid #000;
        transform-origin: left; // 左侧盒子，按左边翻转
    }
    
    .door-right {
        right: 0;
        border-left: 1px solid #000;
        transform-origin: right; // 右侧盒子，按右边翻转
    }
    <!---->伪元素设置开门的把手
    .door-left::before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        width: 20px;
        height: 20px;
        border: 1px solid #000;
        border-radius: 50%;
        transform: translateY(-50%); // 设置把手垂直居中
    }
    
      .door-right::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 20px;
        height: 20px;
        border: 1px solid #000;
        border-radius: 50%;
        transform: translateY(-50%); // 设置把手垂直居中
    }
    
    section:hover .door-left {
        transform: rotateY(-130deg);
    }
      section:hover .door-right {
        transform: rotateY(130deg);
    }
复制代码

三、门关闭时的效果

四、门打开效果

源码下载

源码下载