如何使用純CSS實(shí)現(xiàn)飛機(jī)舷窗風(fēng)格的toggle控件

1、如何使用純css實(shí)現(xiàn)飛機(jī)舷窗風(fēng)格的toggle控件源代碼下載 代碼解讀 定義dom，.windows容器表示舷窗，它的子元素.curtain表示窗簾： 居中顯示： body margin:0; height:100vh; display:flex; align-items:center; justify-content:center; background-color:skyblue; 設(shè)置舷窗的尺寸，由于后面還會(huì)用到字號(hào)，所以字號(hào)用變量定義： :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); 設(shè)置窗簾樣式，和窗口尺寸一樣，但不拉到底： .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%; 用偽元素在窗簾上畫出指示燈，當(dāng)窗簾關(guān)閉時(shí)亮紅色光： .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); 以上是舷窗關(guān)閉時(shí)的樣子，接下來繪制舷窗打開時(shí)的效果。 先在dom中添加一個(gè)checkbox，當(dāng)它被checked時(shí)即表示舷窗被打開： 躲藏checkb

5、ox，用opacity(0)可以使元素在不行見的狀態(tài)下仍可交互，把它的尺寸設(shè)置得到舷窗一樣大，并且圖層在舷窗之上，得到的效果就是點(diǎn)擊舷窗時(shí)實(shí)際是點(diǎn)擊了checkbox： .toggle position:absolute; filter:opacity(0); width:25em; height:35em; font-size:var(-font-size); cursor:pointer; z-index:2; 當(dāng)舷窗打開時(shí)，.curtain要向上移動(dòng)，并且指示燈亮綠色光： .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; 接下來繪制舷窗外的風(fēng)景。 在dom中增強(qiáng)表示云朵的.clouds元素，其中的5個(gè)子元素分離表示1朵白云： 用云朵容器畫出窗外的藍(lán)天： .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個(gè)突起的圓?。?.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; 增強(qiáng)云朵飄動(dòng)的動(dòng)畫效果： .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