ChatGPT:
Simple Animation Example PROGRAM

on

COMPILED RESULT

→ → → airflow over wing → → →
→ → → airflow under wing → → →

SOURCE

CODE

CSS:

<style>
        /* AIRFOIL VISUAL ONLY */

        .airfoil-box {
                position: relative;

                height: 90px;

                margin: 20px 0;

                border: 1px solid #2a394a;

                background: #111821;

                overflow: hidden;
        }

        .wing {
                position: absolute;

                width: 220px;

                height: 20px;

                background: #7cc7ff;

                border-radius: 50% 50% 40% 40%;

                top: 35px;

                left: 50%;

                transform: translateX(-50%);
        }

        .flow {
                position: absolute;

                white-space: nowrap;

                color: #7cc7ff;

                font-family: Consolas, monospace;

                animation: flowmove 6s linear infinite;
        }

        .flow.top {
                top: 10px;
        }

        .flow.bottom {
                bottom: 10px;
        }

        @keyframes flowmove {
                from {
                        left: -100%;
                }

                to {
                        left: 100%;
                }
        }
</style>

LOADER:
<div class="airfoil-box">
        <div class="wing"></div>
        <div class="flow top">→ → → airflow over wing → → →</div>
        <div class="flow bottom">→ → → airflow under wing → → →</div>
</div>

Comments

Post a Comment