如何使用纯CSS实现飞机舷窗风格的toggle控件

1、如何使用纯css实现飞机舷窗风格的toggle控件源代码下载 代码解读 定义dom，.windows容器表示舷窗，它的子元素.curtain表示窗帘： 居中显示： 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; wi

2、dth:25em; height:35em; font-size:var(-font-size); background-color:d9d9d9; 用阴影画出厚窗框： .window border-radius:5em; box-shadow: inset008emrgba(0,0,0,0.2), 0000.4em808080, 0004emwhitesmoke, 0004.4em808080, 02em4em4emrgba(0,0,0,0.1); 设置窗帘样式，和窗口尺寸一样，但不拉到底： .window.curtain position:absolute; width:inherit;

3、height:inherit; border-radius:5em; box-shadow: 0000.5em808080, 003emrgba(0,0,0,0.4); background-color:whitesmoke; left:0; top:-5%; 用伪元素在窗帘上画出指示灯，当窗帘关闭时亮红色光： .window.curtain:before content:&39;&39; position:absolute; width:40%; height:0.8em; background-color:808080; left:30%; bottom:1.6em; bo

4、rder-radius:0.4em; .window.curtain:after content:&39;&39; 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时即表示舷窗被打开： 躲藏checkb

5、ox，用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:checke

6、d.window.curtain top:-90%; .toggle:checked.window.curtain:after background-image:radial-gradient(lightgreen,limegreen); 躲藏超出窗户的部分： .window overflow:hidden; 接下来绘制舷窗外的风景。 在dom中增强表示云朵的.clouds元素，其中的5个子元素分离表示1朵白云： 用云朵容器画出窗外的蓝天： .window.clouds position:relative; width:20em; height:30em; background-color:d

7、eepskyblue; box-shadow:0000.4em808080; 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:&

8、;39;&39; 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; .cloudss