문서 편집 권한이 없습니다. 다음 이유를 확인해주세요: 요청한 명령은 다음 중 하나의 권한을 가진 사용자에게 제한됩니다: 사용자, 관리자. 문서를 고치려면 이메일 인증 절차가 필요합니다. 사용자 환경 설정에서 이메일 주소를 입력하고 이메일 주소 인증을 해주시기 바랍니다. 문서의 원본을 보거나 복사할 수 있습니다. .bg-test { animation-name: bg-glitch; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } @keyframes bg-glitch { 0% { background: black; } 50% { background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), radial-gradient(circle, yellow, black); } 51% { background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), radial-gradient(circle, red, black); } 52% { background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), radial-gradient(circle, blue, black); } 100% { background: black; } } .glitch-test { position: relative; z-index: 1; } .glitch-test:before, .glitch-test:after { display: block; content: attr(data-text); position: absolute; top: 0; left: 0; opacity: 0.8; } .glitch-test:before { animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; color: #0ff; z-index: -1; } .glitch-test:after { animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite; color: #f0f; z-index: -2; } @keyframes glitch-it { 0% { transform: translate(0); } 20% { transform: translate(-2%, 2%); } 40% { transform: translate(-2%, -2%); } 60% { transform: translate(2%, 2%); } 80% { transform: translate(2%, -2%); } to { transform: translate(0); } } .hover-scale { margin: -.3rem -.6rem; transition: transform .25s; } .hover-scale:hover { transform: scale(1.2, 1.2); z-index: 999999; } .remove-test { position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 999999; background: black; display: table; animation-name: remove-test; animation-delay: .5s; animation-duration: 4s; animation-iteration-count: 1; animation-fill-mode: forwards; } .remove-test-text { position: absolute; width: 300px; height: 300px; } .remove-test-textbox { text-align: center; position: relative; top: 50%; left: 50%; margin: -150px 0 0 -150px; } @keyframes remove-test { 0% { opacity: 1; top: 0; right: 0; } 25% { opacity: 0; top: 0; right: 0; } 100% { opacity: 0; top: 999999999px; right: 999999999px; } } /* 로딩창 테스트 */ .loading-bar-2 { position: relative; } .loading-bar-2 div { position: absolute; display: inline-block; width: 50px; height: 50px; border: 5px solid #00beff; border-radius: 50%; border-color: #00beff transparent transparent transparent; animation: loading-bar-2-rotate 1s infinite; } .loading-bar-2 div:nth-child(1) { animation-delay: -.3s; } .loading-bar-2 div:nth-child(2) { animation-delay: -.2s; } .loading-bar-2 div:nth-child(3) { animation-delay: -.1s; } @keyframes loading-bar-2-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loading-bar { display: inline-block; width: 50px; height: 50px; border: 5px solid silver; border-bottom: 5px solid #00beff; border-radius: 50%; animation: loading-bar-rotate 1s linear infinite; } @keyframes loading-bar-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 이미지에 crimson 테두리 */ /* [[서은우 (칠성고등학교: First Children)]] 문서에서 사용 */ .crimson-shadow-img img { filter: drop-shadow(0 0 12px crimson); } /* 슬래시 앤 서바이브 대문 */ .slash-and-survive-main a { display: inline-block; width: 100%; padding: .8em 1em; border-radius: 10px; text-align: center; font-family: KoPubDotumMedium; font-size: 18pt; background: black; color: white; transition: font-weight .2s, text-shadow .2s; animation: none; } .slash-and-survive-main a:hover { background: linear-gradient(to right, black, #640000, black); font-weight: bold; text-shadow: 0 0 12px red, 0 0 12px red, 0 0 12px red; text-decoration: none; } /* 이미지에 흰색 그림자 */ /* [[길령]] 문서 전투력 문단에 사용 */ .white-shadow-image { filter: drop-shadow(0 0 6px white) drop-shadow(0 0 6px white); } /* 이미지에 검은색 그림자 */ /* [[틀:성검의 선택자]] 문서에 사용 */ .black-shadow-image img { filter: drop-shadow(0 0 6px gray); } /* 길이가 길어지는 막대 */ .width-lengthen-bar{ margin: 12px 0; width: 150px; background: orange; transition: width .2s; } .width-lengthen-bar:hover{ width: 350px; } .width-lengthen-bar-2{ margin: 12px 0; width: 150px; background: orange; transition: width .2s; } .width-lengthen-bar-2:active{ width: 350px; } /* 무지개 애니메이션 */ .rainbow{ margin: 12px 0; height: 50px; background: linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple); transition: all 2s; animation-name: rainbow; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 2s; } @keyframes rainbow{ 14%{ background: linear-gradient(135deg, orange, yellow, green, blue, navy, purple, red); } 28%{ background: linear-gradient(135deg, yellow, green, blue, navy, purple, red, orange); } 42%{ background: linear-gradient(135deg, green, blue, navy, purple, red, orange, yellow); } 56%{ background: linear-gradient(135deg, blue, navy, purple, red, orange, yellow, green); } 70%{ background: linear-gradient(135deg, navy, purple, red, orange, yellow, green, blue); } 84%{ background: linear-gradient(135deg, purple, red, orange, yellow, green, blue, navy); } 100%{ background: linear-gradient(135deg, red, orange, yellow, green, blue, navy, purple); } } /* 회전하는 애니메이션 */ .rotate{ margin: 12px 0; width: 50px; height: 50px; background: linear-gradient(red, blue); border-radius: 50%; transition: transform .2s; } .rotate:hover{ transform: rotate(720deg); } /* 버튼 */ .button { display: block; cursor: pointer; position: relative; float: left; width: 120px; padding: 0; margin: 10px 20px 10px 0; font-weight: 600; text-align: center; line-height: 50px; color: #FFF; border-radius: 5px; transition: all 0.2s; user-select: none; } .btnBlueGreen { background: #00AE68; } .btnBlueGreen.btnPush { box-shadow: 0px 5px 0px 0px #007144; } .btnPush:active { margin-top: 15px; margin-bottom: 5px; } .btnBlueGreen.btnPush:active { box-shadow: 0px 0px 0px 0px #007144; } /* 무지개 텍스트 */ .rainbow-text{ user-select: none; transition: animation 1s; } .rainbow-text:hover{ animation-name: rainbow-text; animation-iteration-count: infinite; animation-duration: 3s; } @keyframes rainbow-text{ 0% { color: red; } 14% { color: orange; } 28% { color: yellow; } 42% { color: green; } 56% { color: blue; } 70% { color: navy; } 84% { color: purple; } 100% { color: red; } } 틀:김찬/styles.css 문서로 돌아갑니다.