前端日常实践：156#视频演示如何使用纯CSS制作一个飞机舷窗样式的切换控件
时间：2023-04-05 13:37:50
HTML5
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接即可全屏预览。https://codepen.io/comehop??e/pen/jeaOrw互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cdZVGSD源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，.windows容器代表舷窗，其子元素.curtain代表窗帘：
居中显示：主体{边距：0；高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:skyblue;}设置舷窗的大小，因为后面会用到字体大小，所以字体大小由一个变量定义：:root{--font-size:10px;}.window{position:相对的;框大小：边框框；宽度：25em；高度：35em；字体大小：var（--字体大小）；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;宽度：继承；身高：继承；边界半径：5嗯；盒子阴影：0000.5em#808080,003emrgba(0,0,0,0.4);背景颜色：白烟；左：0；前5％;在上面画指示灯，当窗帘关闭时会亮红色：.window.curtain::before{content:'';位置：绝对；宽度：40%；高度：0.8em；背景色：#808080；左：30%；底部：1.6em；border-radius:0.4em;}.window.curtain::after{content:'';位置：绝对；宽度：1.6em；高度：0.8em；（橙色，橙红色）；底部：1.6em；边界半径：0.4em；left:calc((100%-1.6em)/2);}上面是舷窗关闭时的样子，再画出舷窗打开时的效果首先在dom中添加一个复选框。勾选时表示舷窗打开：
隐藏复选框，并使用opacity(0)使元素具有交互性，即使它是不可见的。将其大小设置为与舷窗一样大，图层位于舷窗之上。效果是点击porthole实际上点击了复选框：.toggle{position:absolute;过滤器：不透明度（0）；宽度：25em；高度：35em；字体大小：var（--字体大小）；游标：指针；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个
