ホームページ > 記事 > ウェブフロントエンド > CSS3で動的にドアを開ける効果を実現（コード例）
CSS3で動的にドアを開ける効果を実現（コード例）
- 青灯夜游オリジナル
- 2018-09-21 14:47:243446ブラウズ
この章では、ドアのエフェクトを動的に開くための 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 サイトの他の関連記事を参照してください。