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

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

HTML代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--      引入css -->
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!--在dom中增加表示云朵的.clouds元素.其中可以定义5个span子元素 分别代表1个云朵 -->
    <input type="checkbox" class="toggle">
    <figure class="window">
        <!-- 窗帘 -->
        <div class="curtain"></div>
        <div class="clouds">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </figure>
</body>
</html>

 

CSS代码

/* 初始化 */
body{
    margin: 0px;
    height: 100vh;
    /* 弹性布局 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 上下居中 */
    align-items: center;
    /* 定义背景颜色 */
    background-color: skyblue;
}

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

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

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


/* 用伪类在窗帘上画出灰色长条 */
.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;
    /* 100% 值得是窗户视图的唯一指示灯宽度,然后咱们可以将剩余的距离居中 */
    left: calc((100% - 1.6em)/2);
    border-radius: 0.4em;
}

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

/* 隐藏checkbox  */
.toggle{
    /* 绝对定位 */
    position: absolute;
    width: 25em;
    height: 35em;
    font-size: 5px;
    z-index: 3;
    /* 鼠标放上变小手 */
    cursor: pointer;
    filter: opacity(0%);
}

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

/* 云朵画出来 */
.clouds span{
    position: absolute;
    width: 10em;
    height: 4em;
    background-color: white;
    border-radius: 4em;
    top: 20%;
    animation: move 4s linear infinite;
}
/* 定义动画 */
@keyframes move{
    from{
        left: -150%;
    }
    to{
        left: 150%;
    }
}
/*   用伪元素 画 2个突起的圆弧 */
.clouds span::before,
.clouds span::after{
    content: "";
    position: absolute;
    width: 4em;
    height: 4em;
    background-color: white;
    border-radius: 50%;
}

.clouds span::before{
    top: -2em;
    left: 2em;
}
.clouds span::after{
    top: -1em;
    right: 1em;
}

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

.clouds span:nth-child(3){
    top: 60%;
    animation-delay: -0.5s;
}
.clouds span:nth-child(4){
    top: 20%;
    transform: scale(2);
    animation-delay: -1.5s;
}
.clouds span:nth-child(5){
    top: 70%;
    /* 变大1.5呗 */
    transform: scale(1.5);
    animation-delay: -3s;
}

 

HTML学习笔记经验分享

H5大前端学习路线图

2022-1-12 16:47:05

闲言碎语

小人的7个特征,帮你认清身边的小人!(修)

2022-5-26 16:07:23

2 条回复 A文章作者 M管理员
  1. 可以转载你的代码吗?

    • 代码可以免费分享使用的哦

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索