문서 편집 권한이 없습니다. 다음 이유를 확인해주세요: 요청한 명령은 다음 권한을 가진 사용자에게 제한됩니다: 사용자. 문서의 원본을 보거나 복사할 수 있습니다. <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> 틀:공작새 문서로 돌아갑니다.