편집 요약 없음 |
편집 요약 없음 |
||
| 5번째 줄: | 5번째 줄: | ||
<div class="horizontal-line right"></div> | <div class="horizontal-line right"></div> | ||
</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> | |||
2024년 7월 9일 (화) 18:03 기준 최신판
<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>