CSS3實現動態開啟大門效果（程式碼實例）
- 青灯夜游原創
- 2018-09-21 14:47:243369瀏覽
本章為大家介紹CSS3實現動態開啟大門效果（程式碼實例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助
先看看效果圖：
<div class="door">
<div class="door-l"></div>
<div class="door-r"></div>
</div>2、給外層盒子（.door） 加上基本的屬性、背景、視距以及相對定位（子盒子要用到絕對定位，所以父盒子最好加上相對定位）。 .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、添加門上的 小圓環，在這裡是使用偽類 before 進行添加的。 （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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn