CSS3はダウンドアオープン効果を実現します

原則の実現の影響下にドアを開け

1. 使用するプロパティの効果回転効果をcss3rotate
2. 使用するプロパティの実装ドア開口部の効果をcss3transform-origin

まず、HTMLページレイアウトのコード

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

第二に、CSSスタイルのコード

約2ドアの効果を達成するため、主に位置決めモード、左右2つのドアの位置合わせに使用されます。回転の主要効果は、マウスは、ボックスの上を通過する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);
    }
复制代码

ドアが閉じている第三に、効果

第四に、ドアが効果を開けました

ソースのダウンロード

ソースのダウンロード