成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 實例之打開大門

番茄西紅柿 / 1704人閱讀

摘要：本個實例主要的效果如下圖所示本案例主要運用到了旋轉(zhuǎn)和定位技術(shù)。給左右的門設(shè)置相關(guān)屬性，這里給出左盒子的相關(guān)屬性。右盒子只需將定位改為右邊距離為，以及將旋轉(zhuǎn)軸改為右側(cè)即可。設(shè)置大小與邊框設(shè)置為讓其變成圓形。

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

本案例主要運用到了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 進行添加的。

　　（1）、設(shè)置大小與邊框 

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

　　（3）、設(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 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>Documenttitle>
    <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

 

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1775.html

相關(guān)文章

  • LeetCode 之 JavaScript 解答第21題 —— 合并兩個有序鏈表（Merge Two

    摘要：什么意思呢比如上方合并鏈表的代碼，分別明確函數(shù)的參數(shù)和返回值是什么參數(shù)是兩個合并的鏈表結(jié)點頭結(jié)點。返回值是合并后的鏈表。 Time：2019/4/9Title: Merge Two Sorted ListsDifficulty: EasyAuthor: 小鹿 題目：Merge Two Sorted Lists Merge two sorted linked lists and re...

    wdzgege 評論0 收藏0

  • (十四)java多線程之死鎖以及解決方案

    摘要：本人郵箱歡迎轉(zhuǎn)載轉(zhuǎn)載請注明網(wǎng)址代碼已經(jīng)全部托管有需要的同學(xué)自行下載引言多線程如果設(shè)計的不合理的話很可能就會出現(xiàn)死鎖當兩個或者多個線程同事想要去獲取共享資源的鎖時但每個線程都要等其他線程把他們各自的鎖給釋放才能繼續(xù)運行這就是死鎖出現(xiàn)死鎖必須具 本人郵箱: 歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明網(wǎng)址 http://blog.csdn.net/tianshi_kcogithub: https://github...

    wendux 評論0 收藏0

  • 請行動2019 | 一切過往，皆是序章

    摘要：當初月初懷揣著夢想踏入了這座陌生的城市北京，那時候的北京酷熱難耐，而我依舊在外四處奔波。燥熱的北京已經(jīng)無法安放迫切的心靈，當面試一次次的從自己身邊劃走。北京的夜晚沒有了白天的燥熱，也少了幾分嘈雜，涼風(fēng)習(xí)習(xí)。 ??人生苦短。新年的開端是一份可遇不可求的緣。一年等一回，當新歲的第一輪紅日從東方升起時,它讓我們格外欣喜,值得我們格外珍惜。回想起自己過去一年，所有的經(jīng)歷歷歷在目。當初7月初懷揣...

    Tonny 評論0 收藏0

  • Laravel 上手教程之實現(xiàn)用戶注冊和登錄

    摘要：在文件的標簽中加上以下代碼新手上路注冊登陸上面只是引用了一些簡單的的，也沒什么難的，不用傷心。 Laravel身為最優(yōu)雅的PHP框架，很多學(xué)習(xí)PHP的小伙伴造就對Laravel垂涎欲滴。今天就來實現(xiàn)你的愿望，讓我們一起從零開始，利用Laravel實現(xiàn)Web應(yīng)用最常見的注冊和登錄功能！所有的課程源碼已放在Github上：laravel-start. Race Start ! 首先我們來...

    stormgens 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<