溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS3實現(xiàn)動態(tài)打開大門效果的方法

發(fā)布時間：2020-10-22 15:39:59 來源：億速云 閱讀：214 作者：小新 欄目：web開發(fā)

CSS3實現(xiàn)動態(tài)打開大門效果的方法？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

先看看效果圖：

CSS3實現(xiàn)動態(tài)打開大門效果的方法

動態(tài)打開大門效果主要運用到了3D旋轉(zhuǎn)和定位技術(shù)。具體步驟如下：

1、首先在頁面主體加三個很簡單的div標簽：

<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、給左右的門設(shè)置相關(guān)屬性，這里給出左盒子的 相關(guān)屬性。右盒子只需將定位改為右邊距離為0，以及將旋轉(zhuǎn)軸改為右側(cè)即可。

.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、添加門上的 小圓環(huán)，在這里是使用偽類 before 進行添加的。

　?。?）、設(shè)置大小與邊框

　?。?）、設(shè)置border-radius 為50% 讓其變成圓形。

　?。?）、設(shè)置定位 垂直居中并靠里面有一定距離。

.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、最后設(shè)置旋轉(zhuǎn)度數(shù)，我這里是設(shè)置了120度（注意度數(shù)的正負代表旋轉(zhuǎn)方向）

.door:hover .door-l {
            transform: rotateY(-120deg);
        }

下面給出完整代碼，給大家參考一下。

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title>動態(tài)打開大門</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>

感謝各位的閱讀！看完上述內(nèi)容，你們對CSS3實現(xiàn)動態(tài)打開大門效果的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手