HTML5是當前最常用的網頁制作語言之一。它可以讓我們制作出多樣化的網頁效果，其中一種是開門特效。在這篇文章中，我們會學習如何使用HTML5實現簡單的開門特效。
<!DOCTYPE html>
<html>
<head>
<title>開門特效</title>
<style>
.door-wrapper {
position: relative;
height: 200px;
width: 500px;
margin: 50px auto;
border: 2px solid #000;
overflow: hidden;
}
.door-left,
.door-right {
position: absolute;
top: 0;
height: 100%;
width: 50%;
background-color: #eee;
transition: all 1s ease;
}
.door-left {
left: 0;
transform-origin: left center;
transform: perspective(400px) rotateY(0deg);
}
.door-right {
right: 0;
transform-origin: right center;
transform: perspective(400px) rotateY(0deg);
}
.door-open .door-left {
transform: perspective(400px) rotateY(-110deg);
}
.door-open .door-right {
transform: perspective(400px) rotateY(110deg);
}
</style>
</head>
<body>
<div class="door-wrapper" onclick="document.body.classList.toggle('door-open')">
<div class="door-left"></div>
<div class="door-right"></div>
</div>
</body>
</html>以上代碼創建了一個名為“door-wrapper”的div容器，并設置它的高度、寬度、邊框等樣式。在容器內部，我們又創建了兩個名為“door-left”和“door-right”的div，它們分別覆蓋容器的左半邊和右半邊，用來模擬門的左右兩側。每個門片上設置了一個簡單的過渡動畫，告訴它們在1秒鐘內沿Y軸旋轉。通過transform屬性的rotateY屬性，我們可以將這兩個div旋轉到指定角度。
當我們點擊“door-wrapper”容器時，開門動畫就會開始執行。此時，容器的class屬性會動態地改變成“door-open”，這個class添加到了頁面主體（body）上。并且，我們使用選擇器對“door-left”和“door-right”進行了附加樣式的設置，讓它們分別旋轉到指定的角度，即逆時針旋轉110度和順時針旋轉110度。這樣，兩個div就會像門一樣打開。
這就是HTML5開門特效的簡單實現，它使用了CSS3中的過渡動畫，可以讓我們在網頁制作中創造多樣化的效果。如果你想更深入地了解HTML5及其相關技術，請繼續學習相關的教程。
上一篇html5異步加載代碼
下一篇mysql8 日志子系統