CSS 實例之打開大門_ZenDei技術網路在線

CSS 實例之打開大門

-Advertisement-

本個實例主要的效果如下圖所示本案例主要運用到了3D旋轉和定位技術。具體步驟如下： 1、首先在頁面主體加三個很簡單的div標簽： 2、給外層盒子（.door）加上基本的屬性、背景、視距以及相對定位（子盒子要用到絕對定位，所以父盒子最好加上相對定位）。 3、給左右的門設置相關屬性，這裡給出左盒子的 ...

本個實例主要的效果如下圖所示

本案例主要運用到了3D旋轉和定位技術。具體步驟如下：

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、給左右的門設置相關屬性，這裡給出左盒子的相關屬性。右盒子只需將定位改為右邊距離為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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</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>

View Code

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

vue-scroller實現vue單頁面的上拉載入和下拉刷新問題

在vue中如何簡單的實現頁面的上拉載入和下拉刷新，在這裡我推薦使用vue-scrolle插件。 vue-scrolle的基本使用方法： 1.下載 2.導包 3.項目使用 4.修改代碼將模板轉成你自己想要的效果。 ...
字元串跟數字進行計算的結果

哈哈可以如上面圖片所示，字元串跟數字在一起計算的時候只有進行加計算的時候才會變成字元串，其它的都會轉換成數字哈哈這個+操作就像我們把字元拼接起來吧 ...
JavaScript基礎教程總結（001-010章）

001-010章總結 001. JS簡介 1.什麼是語言電腦就是一個由人來控制的機器，想叫它幹嘛就幹嘛。我們要學習的語音就是人和電腦交流的工具，人類通過語言來控制，操作電腦。編程語言和我們的中文，英文本質上沒有區別，只是語法比較特殊。語言的發展歷程： -紙帶機：機器語言 -彙編語言：符... ...
span文字裡面自動換行時怎麼辦

可以用white-space:nowrap來強制文字不換行，知道遇到<br>為止 ...
防抖 - 理解，實踐與實現

為了完整閱讀體驗，歡迎移步到我的 "博客原文" 。防抖（去抖），以及節流（分流）在日常開發中可能用的不多，但在特定場景，卻十分有用。本文主要討論防抖，鏡像文章： "節流理解，實踐與實現" 。分開討論防抖和節流，主要是為了讓一些還不太瞭解防抖節流的讀者能夠有針對性地，逐一掌握它們。防抖有兩種模 ...
html js div隨滑鼠移動

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>onmousemove</title> <style type="text/css"> #box1{ width:100px; height:100px; background-co ...
前端學習之路之CSS （二）

Infi-chu: http://www.cnblogs.com/Infi-chu/ id選擇器id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式,CSS 中 id 選擇器以 "#" 來定義。 class選擇器class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇 ...
前端學習之路之CSS （一）

Infi-chu: http://www.cnblogs.com/Infi-chu/ 簡介： CSS 指層疊樣式表 (Cascading Style Sheets) 樣式定義如何顯示 HTML 元素樣式通常存儲在樣式表中把樣式添加到 HTML 4.0 中，是為瞭解決內容與表現分離的問題外部樣式 ...