.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; }
}