這篇文章主要介紹了怎么用純CSS實現(xiàn)飛機舷窗風格的toggle控件，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們提供的服務(wù)有：網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、同江ssl等。為成百上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的同江網(wǎng)站制作公司

    代碼解讀

    定義dom，.windows容器表示舷窗，它的子元素.curtain表示窗簾：

    <figureclass="window">

    <divclass="curtain"></div>

    </figure>

    居中顯示：

    body{

    margin:0;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background-color:skyblue;

    }

    設(shè)置舷窗的尺寸，因為后面還會用到字號，所以字號用變量定義：

    :root{

    --font-size:10px;

    }

    .window{

    position:relative;

    box-sizing:border-box;

    width:25em;

    height:35em;

    font-size:var(--font-size);

    background-color:#d9d9d9;

    }

    用陰影畫出厚窗框：

    .window{

    border-radius:5em;

    box-shadow:

    inset008emrgba(0,0,0,0.2),

    0000.4em#808080,

    0004emwhitesmoke,

    0004.4em#808080,

    02em4em4emrgba(0,0,0,0.1);

    }

    設(shè)置窗簾樣式，和窗口尺寸一樣，但不拉到底：

    .window.curtain{

    position:absolute;

    width:inherit;

    height:inherit;

    border-radius:5em;

    box-shadow:

    0000.5em#808080,

    003emrgba(0,0,0,0.4);

    background-color:whitesmoke;

    left:0;

    top:-5%;

    }

    用偽元素在窗簾上畫出指示燈，當窗簾關(guān)閉時亮紅色光：

    .window.curtain::before{

    content:'';

    position:absolute;

    width:40%;

    height:0.8em;

    background-color:#808080;

    left:30%;

    bottom:1.6em;

    border-radius:0.4em;

    }

    .window.curtain::after{

    content:'';

    position:absolute;

    width:1.6em;

    height:0.8em;

    background-image:radial-gradient(orange,orangered);

    bottom:1.6em;

    border-radius:0.4em;

    left:calc((100%-1.6em)/2);

    }

    以上是舷窗關(guān)閉時的樣子，接下來繪制舷窗打開時的效果。

    先在dom中添加一個checkbox，當它被checked時即表示舷窗被打開：

    <inputtype="checkbox"class="toggle">

    <figureclass="window">

    <divclass="handle"></div>

    </figure>

    隱藏checkbox，用opacity(0)可以使元素在不可見的狀態(tài)下仍可交互，把它的尺寸設(shè)置得到舷窗一樣大，并且圖層在舷窗之上，得到的效果就是點擊舷窗時實際是點擊了checkbox：

    .toggle{

    position:absolute;

    filter:opacity(0);

    width:25em;

    height:35em;

    font-size:var(--font-size);

    cursor:pointer;

    z-index:2;

    }

    當舷窗打開時，.curtain要向上移動，并且指示燈亮綠色光：

    .window.curtain{

    transition:0.5sease-in-out;

    }

    .toggle:checked~.window.curtain{

    top:-90%;

    }

    .toggle:checked~.window.curtain::after{

    background-image:radial-gradient(lightgreen,limegreen);

    }

    隱藏超出窗戶的部分：

    .window{

    overflow:hidden;

    }

    接下來繪制舷窗外的風景。

    在dom中增加表示云朵的.clouds元素，其中的5個<span>子元素分別表示1朵白云：

    <inputtype="checkbox"class="toggle">

    <figureclass="window">

    <divclass="curtain"></div>

    <divclass="clouds">

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    <span></span>

    </div>

    </figure>

    用云朵容器畫出窗外的藍天：

    .window.clouds{

    position:relative;

    width:20em;

    height:30em;

    background-color:deepskyblue;

    box-shadow:0000.4em#808080;

    left:calc((100%-20em)/2);

    top:calc((100%-30em)/2);

    border-radius:7em;

    }

    每朵云由3部分組成，先畫面積最大的部分：

    .cloudsspan{

    position:absolute;

    width:10em;

    height:4em;

    background-color:white;

    top:20%;

    border-radius:4em;

    }

    再用偽元素畫2個突起的圓?。?/p>

    .cloudsspan::before,

    .cloudsspan::after{

    content:'';

    position:absolute;

    width:4em;

    height:4em;

    background-color:white;

    border-radius:50%;

    }

    .cloudsspan::before{

    top:-2em;

    left:2em;

    }

    .cloudsspan::after{

    top:-1em;

    right:1em;

    }

    增加云朵飄動的動畫效果：

    .cloudsspan{

    animation:move4slinearinfinite;

    }

    @keyframesmove{

    from{

    left:-150%;

    }

    to{

    left:150%;

    }

    }

    使每朵云的大小、位置有一些變化：

    .cloudsspan:nth-child(2){

    top:40%;

    animation-delay:-1s;

    }

    .cloudsspan:nth-child(3){

    top:60%;

    animation-delay:-0.5s;

    }

    .cloudsspan:nth-child(4){

    top:20%;

    transform:scale(2);

    animation-delay:-1.5s;

    }

    .cloudsspan:nth-child(5){

    top:70%;

    transform:scale(1.5);

    animation-delay:-3s;

    }

    最后，隱藏容器外的內(nèi)容：

    .window.clouds{

    overflow:hidden;

    }

感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么用純CSS實現(xiàn)飛機舷窗風格的toggle控件”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習!

網(wǎng)站題目：怎么用純CSS實現(xiàn)飛機舷窗風格的toggle控件
文章路徑：http://chinadenli.net/article4/giceoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、企業(yè)網(wǎng)站制作、網(wǎng)站排名、網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)