틀:공작새 문서 원본 보기

<div class="swiss-flag-container">
    <div class="vertical-line top"></div>
    <div class="vertical-line bottom"></div>
    <div class="horizontal-line left"></div>
    <div class="horizontal-line right"></div>
</div>

<style>
    /* 스위스 국기 애니메이션을 위한 CSS */
    .swiss-flag-container {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #FF0000; /* 빨간색 배경 */
    }

    .vertical-line {
        width: 50px; /* 너비를 50px로 설정 */
        height: 200px; /* 높이를 200px로 설정 */
        background-color: white;
        position: absolute;
        animation-duration: 4s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }

    .vertical-line.top {
        top: -200px;
        left: calc(50% - 25px); /* 가운데 정렬 */
        animation-name: move-from-top;
    }

    .vertical-line.bottom {
        bottom: -200px;
        left: calc(50% - 25px); /* 가운데 정렬 */
        animation-name: move-from-bottom;
    }

    .horizontal-line {
        width: 200px; /* 너비를 200px로 설정 */
        height: 50px; /* 높이를 50px로 설정 */
        background-color: white;
        position: absolute;
        animation-duration: 4s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }

    .horizontal-line.left {
        top: calc(50% - 25px); /* 가운데 정렬 */
        left: -200px;
        animation-name: move-from-left;
    }

    .horizontal-line.right {
        top: calc(50% - 25px); /* 가운데 정렬 */
        right: -200px;
        animation-name: move-from-right;
    }

    @keyframes move-from-top {
        to {
            top: calc(50% - 100px);
        }
    }

    @keyframes move-from-bottom {
        to {
            bottom: calc(50% - 100px);
        }
    }

    @keyframes move-from-left {
        to {
            left: calc(50% - 100px);
        }
    }

    @keyframes move-from-right {
        to {
            right: calc(50% - 100px);
        }
    }
</style>