CSS3 3d鍙岄棬寮€闂ㄦ晥鏋滃疄渚嬮〉闈?/h1>
鍥炲埌鐩稿叧鏂囩珷 »
鏁堟灉锛?/h3>
浠g爜锛?/h3>
CSS浠g爜锛?/h5>
/* 杈冮暱锛岃椤甸潰婧愪唬鐮?*/
HTML浠g爜锛?/h5>
<div id="doorBox" class="door-box">
<div class="wall">
<div class="door-border">
<div class="door-frame">
<!-- 宸﹂棬 -->
<div class="door door-left">
<!-- 闂ㄥ悗 -->
<div class="door-face-0"></div>
<!-- 涓変釜闈?-->
<div class="door-face-2"></div>
<div class="door-face-1"></div>
<div class="door-face-3"></div>
</div>
<!-- 鍙抽棬 -->
<div class="door door-right">
<!-- 闂ㄥ悗 -->
<div class="door-face-0"></div>
<!-- 涓変釜闈?-->
<div class="door-face-2"></div>
<div class="door-face-1"></div>
<div class="door-face-3"></div>
</div>
<!-- 杩涘叆鎸夐挳 -->
<div class="door-btn">
<button id="doorBtnIn" class="door-in">寮€闂?lt;/button>
</div>
</div>
</div>
</div>
</div>
<!-- 涔︽埧 -->
<img src="./xxsh.png" class="room-img">
<div hidden><audio id="audioOpen" src="./open.mp3" preload></audio></div>
JS浠g爜锛?/h5>
var eleDoorBox = document.getElementById('doorBox');
// 寮€闂ㄩ煶鏁坢p3
var eleAudioOpen = document.getElementById('audioOpen');
// 鐐瑰嚮鎸夐挳
document.querySelector('#doorBtnIn').addEventListener('click', function () {
this.style.display = 'none';
eleAudioOpen.play();
eleDoorBox.classList.add('open');
});
鏁堟灉锛?/h3>
浠g爜锛?/h3>
CSS浠g爜锛?/h5>
/* 杈冮暱锛岃椤甸潰婧愪唬鐮?*/
HTML浠g爜锛?/h5>
<div id="doorBox" class="door-box">
<div class="wall">
<div class="door-border">
<div class="door-frame">
<!-- 宸﹂棬 -->
<div class="door door-left">
<!-- 闂ㄥ悗 -->
<div class="door-face-0"></div>
<!-- 涓変釜闈?-->
<div class="door-face-2"></div>
<div class="door-face-1"></div>
<div class="door-face-3"></div>
</div>
<!-- 鍙抽棬 -->
<div class="door door-right">
<!-- 闂ㄥ悗 -->
<div class="door-face-0"></div>
<!-- 涓変釜闈?-->
<div class="door-face-2"></div>
<div class="door-face-1"></div>
<div class="door-face-3"></div>
</div>
<!-- 杩涘叆鎸夐挳 -->
<div class="door-btn">
<button id="doorBtnIn" class="door-in">寮€闂?lt;/button>
</div>
</div>
</div>
</div>
</div>
<!-- 涔︽埧 -->
<img src="./xxsh.png" class="room-img">
<div hidden><audio id="audioOpen" src="./open.mp3" preload></audio></div>
JS浠g爜锛?/h5>
var eleDoorBox = document.getElementById('doorBox');
// 寮€闂ㄩ煶鏁坢p3
var eleAudioOpen = document.getElementById('audioOpen');
// 鐐瑰嚮鎸夐挳
document.querySelector('#doorBtnIn').addEventListener('click', function () {
this.style.display = 'none';
eleAudioOpen.play();
eleDoorBox.classList.add('open');
});
CSS浠g爜锛?/h5>
/* 杈冮暱锛岃椤甸潰婧愪唬鐮?*/
HTML浠g爜锛?/h5>
<div id="doorBox" class="door-box">
<div class="wall">
<div class="door-border">
<div class="door-frame">
<!-- 宸﹂棬 -->
<div class="door door-left">
<!-- 闂ㄥ悗 -->
<div class="door-face-0"></div>
<!-- 涓変釜闈?-->
<div class="door-face-2"></div>
<div class="door-face-1"></div>
<div class="door-face-3"></div>
</div>
<!-- 鍙抽棬 -->
<div class="door door-right">
<!-- 闂ㄥ悗 -->
<div class="door-face-0"></div>
<!-- 涓変釜闈?-->
<div class="door-face-2"></div>
<div class="door-face-1"></div>
<div class="door-face-3"></div>
</div>
<!-- 杩涘叆鎸夐挳 -->
<div class="door-btn">
<button id="doorBtnIn" class="door-in">寮€闂?lt;/button>
</div>
</div>
</div>
</div>
</div>
<!-- 涔︽埧 -->
<img src="./xxsh.png" class="room-img">
<div hidden><audio id="audioOpen" src="./open.mp3" preload></audio></div>
JS浠g爜锛?/h5>
var eleDoorBox = document.getElementById('doorBox');
// 寮€闂ㄩ煶鏁坢p3
var eleAudioOpen = document.getElementById('audioOpen');
// 鐐瑰嚮鎸夐挳
document.querySelector('#doorBtnIn').addEventListener('click', function () {
this.style.display = 'none';
eleAudioOpen.play();
eleDoorBox.classList.add('open');
});
<div id="doorBox" class="door-box"> <div class="wall"> <div class="door-border"> <div class="door-frame"> <!-- 宸﹂棬 --> <div class="door door-left"> <!-- 闂ㄥ悗 --> <div class="door-face-0"></div> <!-- 涓変釜闈?--> <div class="door-face-2"></div> <div class="door-face-1"></div> <div class="door-face-3"></div> </div> <!-- 鍙抽棬 --> <div class="door door-right"> <!-- 闂ㄥ悗 --> <div class="door-face-0"></div> <!-- 涓変釜闈?--> <div class="door-face-2"></div> <div class="door-face-1"></div> <div class="door-face-3"></div> </div> <!-- 杩涘叆鎸夐挳 --> <div class="door-btn"> <button id="doorBtnIn" class="door-in">寮€闂?lt;/button> </div> </div> </div> </div> </div> <!-- 涔︽埧 --> <img src="./xxsh.png" class="room-img"> <div hidden><audio id="audioOpen" src="./open.mp3" preload></audio></div>