CSS3で動的にドアを開ける効果を実現（コード例）-CSSチュートリアル-php.cn

CSS3で動的にドアを開ける効果を実現（コード例）

青灯夜游

リリース： 2018-09-21 14:47:24

オリジナル

3449 人が閲覧しました

この章では、ドアのエフェクトを動的に開くための CSS3 を紹介します (コード例)。必要な友人が参考になれば幸いです。

まずレンダリングを見てみましょう:

CSS3で動的にドアを開ける効果を実現（コード例）

ドアを動的に開くエフェクトでは主に 3D 回転および位置決めテクノロジが使用されます。具体的な手順は次のとおりです:

1. まず、ページの本文に 3 つの非常に単純な div タグを追加します:

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

ログイン後にコピー

2. 基本属性、背景、およびビュー距離を追加します。相対配置 (子ボックスは絶対配置を使用する必要があるため、親ボックスに相対配置を追加するのが最善です)。

.door {
            width: 450px;
            height: 450px;
            border: 1px solid #000000;
            margin: 100px auto;
            background: url(Images/men.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            perspective: 1000px;
        }

ログイン後にコピー

3. 左右のドアに関連する属性を設定します。左側のボックスの関連する属性は次のとおりです。右側のボックスでは、位置を右の距離に 0 に変更し、回転軸を右に変更するだけです。

.door-l {
            width: 50%;
            height: 100%;
            background-color: brown;
            position: absolute;
            top: 0;
            transition: all 0.5s;
            left: 0;
            border-right: 1px solid #000000;
            transform-origin: left;
        }

ログイン後にコピー

4. ドアに小さなリングを追加します。ここでは以前の疑似クラスを使用して追加されています。

(1)、サイズと枠線を設定します

(2)、border-radiusを50%に設定して円形にします。

(3) 位置を縦方向の中央、内側から一定の距離に設定します。

.door-l::before {
            content: "";
            border: 1px solid #000000;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            border-radius: 50%;
            transform: translateY(-50%);
            right: 5px;
        }

ログイン後にコピー

5. 最後に、回転角度を 120 度に設定しました (正と負の角度は回転の方向を表すことに注意してください)

.door:hover .door-l {
            transform: rotateY(-120deg);
        }

ログイン後にコピー

完全なコードを以下に示します。ご参考に。

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title>动态打开大门</title>
	<style>
	.door {
            width: 450px;
            height: 450px;
            border: 1px solid #000000;
            margin: 100px auto;
            background: url(Images/men.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            perspective: 1000px;
        }
        .door-l,.door-r {
            width: 50%;
            height: 100%;
            background-color: brown;
            position: absolute;
            top: 0;
            transition: all 0.5s;
        }
        .door-l {
            left: 0;
            border-right: 1px solid #000000;
            transform-origin: left;
        } 
        .door-r {
            right: 0;
            border-left: 1px solid #000000;
            transform-origin: right;
        }
        .door-l::before, .door-r::before {
            content: "";
            border: 1px solid #000000;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            border-radius: 50%;
            transform: translateY(-50%);
        }
        
        .door-l::before {
            right: 5px;
        } 
        .door-r::before {
            left: 5px;
        }
        .door:hover .door-l {
            transform: rotateY(-120deg);
        }
        .door:hover .door-r {
            transform: rotateY(120deg);
        }
		</style>
	</head>
	<body>
		<div class="door">
			<div class="door-l"></div>
			<div class="door-r"></div>
		</div>
	</body>
</html>

ログイン後にコピー

上記のレンダリングは静的です。上記のコードを自分でコンパイルして効果を確認できます。お役に立てば幸いです

以上がCSS3で動的にドアを開ける効果を実現（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。