飞机窗外的世界的HTML+CSS源代码

今天我们来聊聊一个非常有趣的小项目——“飞机窗外的世界”。从这个标题上看，大多数人可能会以为这是一个让你体验“假装坐飞机”的场景，而事实上，这个页面确实模拟了通过飞机窗户看向外面云朵飘动的景象。

web_effect_airplane_window_1

作为一个前端开发者，面对这个页面源码，应该如何来剖析和理解它的实现呢？让我带大家一起看看这段代码背后的技术逻辑和实现思路。

页面结构和布局

首先，我们先从 HTML 开始。整个页面的结构非常简单清晰：

    
    <body>
    <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>

可以看到，主体部分其实就是一个 <figure> 元素（代表飞机的窗口），里面有两个主要的部分：

一个是 curtain，即窗帘，可以上下拉动；
另一个是 clouds，这是用于显示窗外的云朵。

<input> 标签用来作为一个“开关”来控制窗帘的显示状态，通过勾选或者取消勾选来实现窗帘的开闭效果，这点后面会在 CSS 部分详细讲解。

样式设计

整个页面的布局和动效都通过 CSS 来实现，接下来是对各个关键部分的样式讲解。

1. 页面布局

    
    body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
}

这里，页面的背景色设置为 skyblue，即模拟了天空的颜色。而页面的布局使用了 CSS 的 flex 布局，align-items: center 和 justify-content: center 使得窗口居中显示，页面整体的布局结构非常简洁。

2. 飞机窗户的样式

    
    .window {
    position: relative;
    box-sizing: border-box;
    width: 25em;
    height: 35em;
    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 4.4em #808080,
                0 2em 4em 4em rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

这里使用了 border-radius 将窗口边缘做成了圆角，使其看起来像飞机的舷窗。另外，box-shadow 通过多层阴影的叠加，模拟出窗框的立体感。overflow: hidden 则用于确保云朵和窗帘的内容都只在窗口范围内显示，超出的部分将被隐藏。

3. 窗帘的实现

    
    .curtain {
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: whitesmoke;
    top: -5%;
    border-radius: 5em;
    box-shadow: 0 0 0 0.4em #808080,
                0 0 3em rgba(0, 0, 0, 0.4);
    transition: 0.5s ease-in-out;
    z-index: 2;
}

窗帘部分的实现用到了 position: absolute，这样它可以覆盖整个窗口部分。初始状态下，top: -5% 意味着窗帘只稍微遮住一点窗户，而通过 CSS 的 transition 属性，当我们勾选上面的 input 之后，它会平滑地向上移动，露出窗外的云朵，带来了动态的视觉效果。

4. 切换窗帘的逻辑

    
    .toggle:checked ~ .window .curtain {
    top: -90%;
}

这部分代码是通过 :checked 伪类来监听用户是否勾选了那个 checkbox，然后利用 CSS 选择器的兄弟选择符 ~ 来找到 window 元素内部的 curtain，再修改 top 值，将窗帘向上拉出视野之外。这种方式不仅简洁，还避免了使用 JavaScript 来实现交互。

5. 云朵的动画

    
    @keyframes move {
    from {
        left: -150%;
    }
    to {
        left: 150%;
    }
}

这个 keyframes 定义了云朵在窗口内飘动的动画效果。从 left: -150% 到 left: 150%，模拟了云朵从窗口一侧飘向另一侧的效果。云朵的动画是一个无限循环的线性动画 (animation: move 4s linear infinite;)，通过控制 animation-delay 给不同的云朵一个不同的起始时间，达到了云朵错落飘动的效果，提升了视觉的真实感。

6. 云朵的样式

    
    .clouds span {
    position: absolute;
    width: 10em;
    height: 4em;
    background-color: white;
    top: 20%;
    border-radius: 4em;
    animation: move 4s linear infinite;
}

云朵使用了 <span> 元素，结合 border-radius 设置成椭圆形的白色块，模拟了云的形状。通过 position: absolute 来定位到窗口内部不同的高度，并且不同的 clouds span 有不同的动画延迟时间，使得云朵不会同时移动，营造出自然的动态效果。

技术难点与思考

纯 CSS 动效实现：整个项目的核心交互逻辑都通过 CSS 实现，尤其是窗帘的开关和云朵的移动效果，这体现了 CSS 现代化发展的威力。通过 :checked 伪类结合 transition 和 keyframes，开发者可以完全不依赖 JavaScript 来实现复杂的视觉效果。
多层次阴影的处理：为了模拟舷窗的立体感，代码中使用了多层阴影 (box-shadow) 来增加窗口的质感。每一层阴影都有不同的颜色和扩展半径，使得窗户显得既有内凹的层次感，又有外凸的立体感。
动画的细节处理：云朵的移动并不是同步进行的，而是通过不同的 animation-delay 实现错落有致的漂浮效果。如果没有这些延迟，云朵的动画会显得过于单一和死板。

总结

通过以上分析，大家应该能看出这段代码实现的飞机窗外效果，虽然看起来很炫酷，但其实逻辑上是相对简单且清晰的。

整个效果主要依赖于 CSS 的 flex 布局、position 定位、box-shadow 叠加、keyframes 动画以及 :checked 伪类的应用。整个项目的亮点在于动效的自然流畅，并且几乎完全依赖于 CSS 完成了所有的交互，展现了前端开发中 CSS 动画的强大之处。

对于前端新手来说，这个项目不仅可以帮助理解 CSS 动画和布局的使用，还能培养对细节处理的敏感度。如何通过阴影、圆角和动画来增强页面的视觉效果，是提升前端开发能力的一大法宝。