怎么用纯CSS实现飞机舷窗风格的toggle控件

这篇文章主要介绍了怎么用纯CSS实现飞机舷窗风格的toggle控件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

    代码解读

    定义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;

    }

    设置舷窗的尺寸，因为后面还会用到字号，所以字号用变量定义：

    :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);

    }

    设置窗帘样式，和窗口尺寸一样，但不拉到底：

    .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%;

    }

    用伪元素在窗帘上画出指示灯，当窗帘关闭时亮红色光：

    .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);

    }

    以上是舷窗关闭时的样子，接下来绘制舷窗打开时的效果。

    先在dom中添加一个checkbox，当它被checked时即表示舷窗被打开：

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

    <figureclass="window">

    <divclass="handle"></div>

    </figure>

    隐藏checkbox，用opacity(0)可以使元素在不可见的状态下仍可交互，把它的尺寸设置得到舷窗一样大，并且图层在舷窗之上，得到的效果就是点击舷窗时实际是点击了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个突起的圆弧：

    .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;

    }

    最后，隐藏容器外的内容：

    .window.clouds{

    overflow:hidden;

    }

感谢你能够认真阅读完这篇文章，希望小编分享的“怎么用纯CSS实现飞机舷窗风格的toggle控件”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网node.js频道，更多相关知识等着你来学习!