肥宅综合社区-做一个优雅文明的综合社区

我要注册

搜索内容

飞机窗帘开关动画，HTML+CSS实现

2023-10-05 227阅读 0评论

兄弟们下午好，今天给大家分享个HTML练手小代码，飞机窗帘开关

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!--      引入css -->
  9.     <link rel="stylesheet" href="./style.css">
  10. </head>
  11. <body>
  12.     <!--在dom中增加表示云朵的.clouds元素.其中可以定义5个span子元素 分别代表1个云朵 -->
  13.     <input type="checkbox" class="toggle">
  14.     <figure class="window">
  15.         <!-- 窗帘 -->
  16.         <div class="curtain"></div>
  17.         <div class="clouds">
  18.             <span></span>
  19.             <span></span>
  20.             <span></span>
  21.             <span></span>
  22.             <span></span>
  23.         </div>
  24.     </figure>
  25. </body>
  26. </html>
CSS代码
  1. /* 初始化 */
  2. body{
  3.     margin: 0px;
  4.     height: 100vh;
  5.     /* 弹性布局 */
  6.     display: flex;
  7.     /* 水平居中 */
  8.     justify-content: center;
  9.     /* 上下居中 */
  10.     align-items: center;
  11.     /* 定义背景颜色 */
  12.     background-color: skyblue;
  13. }

  15. .window{
  16.     /* 相对定位 */
  17.     position: relative;
  18.     /* 盒子模型 */
  19.     box-sizing: border-box;
  20.     /* 窗户视图宽是125px不包含外边有box-shadow 画的外边框 */
  21.     width: 25em;
  22.     /* 窗户视图高是125px */
  23.     height: 35em;
  24.     font-size: 5px;
  25.     background-color: #d9d9d9;
  26.     /* 边框变圆 */
  27.     border-radius: 5em;
  28.     box-shadow:
  29.     /* 定义黑色边框 */
  30.     inset 0 0 8em rgba(0, 0, 0, 0.2),
  31.     /* 深灰色的边缘线 */
  32.     0 0 0 0.4em #808080,
  33.     0 0 0 4em whitesmoke,
  34.     /* 深灰色的边缘线 */
  35.     0 0 0 0.4em #808080,
  36.     /* 给阴影加一个原始尺寸 这个尺寸是由第四个参数决定的 */
  37.     0 2em 4em 4em rgba(0, 0, 0, 0.1);
  38.     /* 这个地方加个hidden 未来使下面用到定位的时候,top:-5%的时候 可以将溢出的部分隐藏 */
  39.     overflow: hidden;
  40. }

  42. /* curtain 是窗户的窗帘  和窗口尺寸一致 但不拉到底 */
  43. .window .curtain{
  44.     /* 绝对定位 */
  45.     position: absolute;
  46.     left: 0;
  47.     /* 相对于窗帘的高度 计算向上移动一点 */
  48.     top: -5%;
  49.     /* 继承父标签的尺寸 */
  50.     width: inherit;
  51.     height: inherit;
  52.     border-radius: 5em;
  53.     background-color: whitesmoke;
  54.     /* 给盖子加上边框 0.5em比上面的0,4em大一点能盖住之前的边框 */
  55.     box-shadow: 0 0 0 0.5em #808080,
  56.                 0 0 3em rgba(0, 0, 0, 0.4);
  57.                 /* 给top元素加上过渡效果 */
  58.     transition: top 0.5s ease-in-out;               
  59.     z-index: 2;
  60. }

  62. /* 当多选框被选中的时候, 窗帘网上飘走*/
  63. .toggle:checked ~ .window .curtain{
  64.     top: -90%;
  65. }


  68. /* 用伪类在窗帘上画出灰色长条 */
  69. .window .curtain::before{
  70.     content: '';
  71.     position: absolute;
  72.     width: 40%;
  73.     height: 0.8em;
  74.     background-color: #808080;
  75.     left: 30%;
  76.     bottom: 1.6em;
  77.     border-radius: 0.4em;
  78. }
  79. /* 用伪类在窗帘上画出径向渐变的指示灯 */
  80. .window .curtain::after{
  81.     content: '';
  82.     position: absolute;
  83.     width: 1.6em;
  84.     height: 0.8em;
  85.     background-image: radial-gradient(orange,orangered);
  86.     bottom: 1.6em;
  87.     /* 100% 值得是窗户视图的唯一指示灯宽度,然后咱们可以将剩余的距离居中 */
  88.     left: calc((100% - 1.6em)/2);
  89.     border-radius: 0.4em;
  90. }

  92. /* 当窗帘被选中的时候,颜色变成绿色 */
  93. .toggle:checked ~ .window .curtain::after{
  94.     background-image: radial-gradient(lightgreen,limegreen);
  95. }

  97. /* 隐藏checkbox  */
  98. .toggle{
  99.     /* 绝对定位 */
  100.     position: absolute;
  101.     width: 25em;
  102.     height: 35em;
  103.     font-size: 5px;
  104.     z-index: 3;
  105.     /* 鼠标放上变小手 */
  106.     cursor: pointer;
  107.     filter: opacity(0%);
  108. }

  110. /* 用云朵容器画出窗外的蓝天 */
  111. .window .clouds{
  112.     position: relative;
  113.     width: 20em;
  114.     height: 30em;
  115.     background-color: deepskyblue;
  116.     left: calc((100% - 20em)/2);
  117.     top: calc((100% - 30em)/2);
  118.     border-radius: 7em;
  119.     box-shadow: 0 0 0 0.4em #808080;
  120.     overflow: hidden;
  121. }

  123. /* 云朵画出来 */
  124. .clouds span{
  125.     position: absolute;
  126.     width: 10em;
  127.     height: 4em;
  128.     background-color: white;
  129.     border-radius: 4em;
  130.     top: 20%;
  131.     animation: move 4s linear infinite;
  132. }
  133. /* 定义动画 */
  134. @keyframes move{
  135.     from{
  136.         left: -150%;
  137.     }
  138.     to{
  139.         left: 150%;
  140.     }
  141. }
  142. /*   用伪元素 画 2个突起的圆弧 */
  143. .clouds span::before,
  144. .clouds span::after{
  145.     content: "";
  146.     position: absolute;
  147.     width: 4em;
  148.     height: 4em;
  149.     background-color: white;
  150.     border-radius: 50%;
  151. }

  153. .clouds span::before{
  154.     top: -2em;
  155.     left: 2em;
  156. }
  157. .clouds span::after{
  158.     top: -1em;
  159.     right: 1em;
  160. }

  162. .clouds span:nth-child(2){
  163.     top: 40%;
  164.     animation-delay: -1s;
  165. }

  167. .clouds span:nth-child(3){
  168.     top: 60%;
  169.     animation-delay: -0.5s;
  170. }
  171. .clouds span:nth-child(4){
  172.     top: 20%;
  173.     transform: scale(2);
  174.     animation-delay: -1.5s;
  175. }
  176. .clouds span:nth-child(5){
  177.     top: 70%;
  178.     /* 变大1.5呗 */
  179.     transform: scale(1.5);
  180.     animation-delay: -3s;
  181. }

文章版权声明：本站部分内容系网络转载,如果文章触发到您的利益或版权，请联系本站客服邮箱kefu@fz331.com删除，我们将48小时之内删除。

发表评论

上传附件：
评论列表 （有 0 条评论，227人围观）
切换注册

登录

忘记密码?

切换登录

注册

验证码

导航分类