今天用纯 CSS 实现一个飞机窗外的世界，希望大家开心~
新建一个 index.html ，将下面代码复制进去，保存，双击打开 index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞机窗外的世界</title>
    </title>
</head>

<body>
    <input type="checkbox" class="toggle">
    <figure class="chuangkou">
        <div class="switch"></div>
        <div class="yunduo">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </figure>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: skyblue;
        }

        :root {
            --font-size: 5px;
        }

        .toggle {
            position: absolute;
            filter: opacity(0);
            width: 25em;
            height: 35em;
            font-size: var(--font-size);
            cursor: pointer;
            z-index: 3;
        }

        .chuangkou {
            font-size: var(--font-size);
            background-color: #d9d9d9;
            border-radius: 5em;
            position: relative;
            box-sizing: border-box;
            width: 25em;
            height: 35em;
            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;
        }

        .chuangkou .switch {
            background-color: whitesmoke;
            top: -5%;
            border-radius: 5em;
            position: absolute;
            width: inherit;
            height: inherit;
            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;
        }

        .toggle:checked~.chuangkou .switch {
            top: -90%;
        }

        .chuangkou .switch::before {
            background-color: #808080;
            left: 30%;
            bottom: 1.6em;
            border-radius: 0.4em;
            content: '';
            position: absolute;
            width: 40%;
            height: 0.8em;
        }

        .chuangkou .switch::after {
            content: '';
            position: absolute;
            width: 1.6em;
            height: 0.8em;
            bottom: 1.6em;
            background-image: radial-gradient(orange, orangered);
            left: calc((100% - 1.6em) / 2);
            border-radius: 0.4em;
        }

        .toggle:checked~.chuangkou .switch::after {
            background-image: radial-gradient(lightgreen, limegreen);
        }

        .chuangkou .yunduo {
            border-radius: 7em;
            box-shadow: 0 0 0 0.4em #808080;
            overflow: hidden;
            position: relative;
            width: 20em;
            height: 30em;
            background-color: deepskyblue;
            left: calc((100% - 20em) / 2);
            top: calc((100% - 30em) / 2);
        }

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

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

            to {
                left: 150%;
            }
        }

        .yunduo span::before,
        .yunduo span::after {
            content: '';
            position: absolute;
            width: 4em;
            height: 4em;
            background-color: white;
            border-radius: 50%;
        }

        .yunduo span::before {
            top: -2em;
            left: 2em;
        }

        .yunduo span::after {
            top: -1em;
            right: 1em;
        }

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

        .yunduo span:nth-child(3) {
            top: 60%;
            animation-delay: -0.5s;
        }

        .yunduo span:nth-child(4) {
            top: 20%;
            transform: scale(2);
            animation-delay: -1.5s;
        }

        .yunduo span:nth-child(5) {
            top: 70%;
            transform: scale(1.5);
            animation-delay: -3s;
        }
    </style>
</body>

</html>
结语

感谢您的观看阅读，如果对你有帮助的话，请点点关注呗~
杰人编程网

纯 CSS 带你打开飞机窗看看外面的世界【附源码】

结语
