문서 편집 권한이 없습니다. 다음 이유를 확인해주세요: 요청한 명령은 다음 중 하나의 권한을 가진 사용자에게 제한됩니다: 사용자, 관리자. 문서를 고치려면 이메일 인증 절차가 필요합니다. 사용자 환경 설정에서 이메일 주소를 입력하고 이메일 주소 인증을 해주시기 바랍니다. 문서의 원본을 보거나 복사할 수 있습니다. /* # 등장 애니메이션 */ .IM-PO-maintext { opacity: 0; animation: IM-PO-maintext; animation-iteration-count: 1; animation-duration: 1s; animation-delay: 5.9s; animation-fill-mode: forwards; transition: .2s ease; transform: translateY(0%); } @keyframes IM-PO-maintext { from {opacity: 0; transform: translateY(-20%);} to {opacity: 1; transform: translateY(0%);} } .IM-PO-subtext { opacity: 0; animation: IM-PO-subtext; animation-iteration-count: 1; animation-duration: 1s; animation-delay: 6.5s; animation-fill-mode: forwards; transition: .2s ease; transform: translateX(0%); } @keyframes IM-PO-subtext { from {opacity: 0; transform: translateX(-2%);} to {opacity: 1; transform: translateX(0%);} } .IM-PO-subtext2 { opacity: 0; animation: IM-PO-subtext2; animation-iteration-count: 1; animation-duration: 1s; animation-delay: 5.3s; animation-fill-mode: forwards; transition: .2s ease; transform: translateX(0%); } @keyframes IM-PO-subtext2 { from {opacity: 0; transform: translateX(-2%);} to {opacity: 1; transform: translateX(0%);} } .IM-PO-mainimg { opacity: 0; animation: IM-PO-mainimg; animation-iteration-count: 1; animation-duration: 1s; animation-delay: 5.3s; animation-fill-mode: forwards; transition: .2s ease; } @keyframes IM-PO-mainimg { from {opacity: 0;} to {opacity: 1;} } .IM-PO-keyboard { opacity: 0; animation: IM-PO-keyboard; animation-iteration-count: 1; animation-duration: 1s; animation-delay: 6.7s; animation-fill-mode: forwards; transition: .2s ease; } @keyframes IM-PO-keyboard { from {opacity: 0;} to {opacity: 1;} } .IM-PO-background { animation: IM-PO-background; animation-iteration-count: 1; animation-duration: .5s; animation-fill-mode: forwards; transition: .2s ease; } @keyframes IM-PO-background { from {opacity: 0;} to {opacity: 1;} } .IM-PO-bgnoise { animation: IM-PO-bgnoise; animation-iteration-count: infinite; animation-duration: 1s; animation-timing-function: ease; animation-fill-mode: backwards; transition: .2s linear; } @keyframes IM-PO-bgnoise { 0% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%, rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);} 15% {background:#363636; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 10px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 5%, rgba(0, 5, 5, 0.2) 8%, rgba(5, 20, 55, 0.1) 15%, rgba(55, 55, 55, 0.1) 17%, rgba(55, 55, 55, 0.3) 65%, rgba(55, 55, 55, 0.1) 68%, rgba(20, 20, 20, 0.2) 77%, rgba(20, 20, 20, 0.2) 79%, rgba(55, 55, 55, 0.2) 80%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 92%, rgba(10, 10, 10, 0.3) 97%, rgba(55, 55, 55, 0.3) 100%);} 45% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.2) 11px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 3%, rgba(0, 5, 5, 0.2) 5%, rgba(5, 20, 55, 0.3) 6%, rgba(55, 55, 55, 0.1) 8%, rgba(55, 55, 55, 0.1) 10%, rgba(55, 55, 55, 0.3) 15%, rgba(20, 20, 20, 0.3) 23%, rgba(20, 20, 20, 0.2) 44%, rgba(55, 55, 55, 0.2) 48%, rgba(55, 55, 55, 0.15) 60%, rgba(10, 10, 10, 0.15) 62%, rgba(10, 10, 10, 0.1) 76%, rgba(55, 55, 55, 0.1) 78%);} 50% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%, rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);} 75% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.3) 6px, rgba(0, 0, 0, 0.1) 8px, rgba(0, 0, 0, 0.2) 11px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 3%, rgba(0, 5, 5, 0.2) 5%, rgba(5, 20, 55, 0.3) 6%, rgba(55, 55, 55, 0.1) 8%, rgba(55, 55, 55, 0.1) 10%, rgba(55, 55, 55, 0.3) 15%, rgba(20, 20, 20, 0.3) 23%, rgba(20, 20, 20, 0.2) 44%, rgba(55, 55, 55, 0.2) 48%, rgba(55, 55, 55, 0.15) 60%, rgba(10, 10, 10, 0.15) 62%, rgba(10, 10, 10, 0.1) 76%, rgba(55, 55, 55, 0.1) 78%);} 80% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 10px), linear-gradient(to bottom, rgba(55, 55, 55, 0.3) 5%, rgba(0, 5, 5, 0.2) 8%, rgba(5, 20, 55, 0.1) 15%, rgba(55, 55, 55, 0.1) 17%, rgba(55, 55, 55, 0.3) 65%, rgba(55, 55, 55, 0.1) 68%, rgba(20, 20, 20, 0.2) 77%, rgba(20, 20, 20, 0.2) 79%, rgba(55, 55, 55, 0.2) 80%, rgba(55, 55, 55, 0.1) 85%, rgba(10, 10, 10, 0.1) 92%, rgba(10, 10, 10, 0.3) 97%, rgba(55, 55, 55, 0.3) 100%);} 100% {background:#282828; background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.2) 4px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.1) 12px), linear-gradient(to bottom, rgba(55, 55, 55, 0.2) 8%, rgba(0, 5, 5, 0.3) 11%, rgba(5, 20, 55, 0.2) 13%, rgba(55, 55, 55, 0.2) 20%, rgba(55, 55, 55, 0.2) 60%, rgba(55, 55, 55, 0.3) 70%, rgba(20, 20, 20, 0.3) 72%, rgba(20, 20, 20, 0.3) 73%, rgba(55, 55, 55, 0.3) 75%, rgba(55, 55, 55, 0.2) 85%, rgba(10, 10, 10, 0.2) 88%, rgba(10, 10, 10, 0.2) 95%, rgba(55, 55, 55, 0.2) 95%);} } /* # 반응 애니메이션 */ .IM-PO-Imghover { filter:brightness(1); transition: filter 0.5s; } .IM-PO-Imghover:hover { filter:brightness(1.8); } .IM-PO-FLhover { filter:brightness(0.5); transition: filter 0.5s; } .IM-PO-LFhover:hover { filter:brightness(1.0); } /* # CSS 일반 */ .IM-PO-z { z-index:2; } .IM-PO-z0 { z-index:-1; } .IM-PO-z6 { z-index:6; } .IM-PO-z3 { z-index:3; } .IM-PO-BW { filter: grayscale(100%); } /* # 모바일 반응성 */ @media screen and (min-width: 700px) { .IM-PO-WebDisplay { display:inherit; } } @media screen and (min-width: 700px) { .IM-PO-MobileDisplay { display:none; } } @media screen and (max-width: 700px) { .IM-PO-WebDisplay { display:none; } } @media screen and (max-width: 700px) { .IM-PO-MobileDisplay { display:inherit; } } 틀:ProJOracle/styles.css 문서로 돌아갑니다.