Skip to content

Instantly share code, notes, and snippets.

@kjsman

kjsman/sigong.css

Created September 30, 2017 06:05
Show Gist options
  • Save kjsman/18c1097a087f755faaa67979e46b0626 to your computer and use it in GitHub Desktop.
Save kjsman/18c1097a087f755faaa67979e46b0626 to your computer and use it in GitHub Desktop.
Download ZIP
시공을 위한 CSS
Raw
sigong.css
@keyframes shake {
2% {
transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
4% {
transform: translate(2.5px, -1.5px) rotate(-0.5deg); }
6% {
transform: translate(2.5px, 0.5px) rotate(1.5deg); }
8% {
transform: translate(-0.5px, 2.5px) rotate(-0.5deg); }
10% {
transform: translate(1.5px, -0.5px) rotate(1.5deg); }
12% {
transform: translate(0.5px, -1.5px) rotate(-0.5deg); }
14% {
transform: translate(0.5px, -1.5px) rotate(0.5deg); }
16% {
transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
18% {
transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
20% {
transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
22% {
transform: translate(1.5px, 1.5px) rotate(0.5deg); }
24% {
transform: translate(-1.5px, 2.5px) rotate(1.5deg); }
26% {
transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
28% {
transform: translate(-1.5px, 1.5px) rotate(-0.5deg); }
30% {
transform: translate(1.5px, 0.5px) rotate(0.5deg); }
32% {
transform: translate(1.5px, -0.5px) rotate(0.5deg); }
34% {
transform: translate(2.5px, 1.5px) rotate(-0.5deg); }
36% {
transform: translate(-1.5px, -0.5px) rotate(-0.5deg); }
38% {
transform: translate(1.5px, 2.5px) rotate(-0.5deg); }
40% {
transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
42% {
transform: translate(0.5px, 0.5px) rotate(0.5deg); }
44% {
transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
46% {
transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
48% {
transform: translate(1.5px, 1.5px) rotate(1.5deg); }
50% {
transform: translate(0.5px, -0.5px) rotate(0.5deg); }
52% {
transform: translate(-0.5px, 0.5px) rotate(1.5deg); }
54% {
transform: translate(1.5px, -1.5px) rotate(0.5deg); }
56% {
transform: translate(-0.5px, -1.5px) rotate(1.5deg); }
58% {
transform: translate(2.5px, 1.5px) rotate(0.5deg); }
60% {
transform: translate(-0.5px, -0.5px) rotate(1.5deg); }
62% {
transform: translate(1.5px, 2.5px) rotate(-0.5deg); }
64% {
transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
66% {
transform: translate(2.5px, 1.5px) rotate(-0.5deg); }
68% {
transform: translate(2.5px, 0.5px) rotate(1.5deg); }
70% {
transform: translate(-1.5px, -1.5px) rotate(0.5deg); }
72% {
transform: translate(-1.5px, -0.5px) rotate(-0.5deg); }
74% {
transform: translate(-0.5px, -1.5px) rotate(1.5deg); }
76% {
transform: translate(1.5px, 1.5px) rotate(0.5deg); }
78% {
transform: translate(1.5px, -0.5px) rotate(1.5deg); }
80% {
transform: translate(-0.5px, 1.5px) rotate(1.5deg); }
82% {
transform: translate(2.5px, 2.5px) rotate(0.5deg); }
84% {
transform: translate(-0.5px, 0.5px) rotate(1.5deg); }
86% {
transform: translate(1.5px, -0.5px) rotate(1.5deg); }
88% {
transform: translate(2.5px, -1.5px) rotate(0.5deg); }
90% {
transform: translate(0.5px, -1.5px) rotate(-0.5deg); }
92% {
transform: translate(-0.5px, -1.5px) rotate(1.5deg); }
94% {
transform: translate(2.5px, 0.5px) rotate(1.5deg); }
96% {
transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
98% {
transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
0%, 100% {
transform: translate(0, 0) rotate(0); } }
@keyframes shake-little {
2% {
transform: translate(0px, 0px) rotate(0.5deg); }
4% {
transform: translate(2px, 2px) rotate(0.5deg); }
6% {
transform: translate(2px, 2px) rotate(0.5deg); }
8% {
transform: translate(2px, 2px) rotate(0.5deg); }
10% {
transform: translate(2px, 0px) rotate(0.5deg); }
12% {
transform: translate(0px, 2px) rotate(0.5deg); }
14% {
transform: translate(0px, 0px) rotate(0.5deg); }
16% {
transform: translate(2px, 2px) rotate(0.5deg); }
18% {
transform: translate(0px, 0px) rotate(0.5deg); }
20% {
transform: translate(2px, 0px) rotate(0.5deg); }
22% {
transform: translate(2px, 2px) rotate(0.5deg); }
24% {
transform: translate(0px, 2px) rotate(0.5deg); }
26% {
transform: translate(0px, 0px) rotate(0.5deg); }
28% {
transform: translate(0px, 0px) rotate(0.5deg); }
30% {
transform: translate(2px, 2px) rotate(0.5deg); }
32% {
transform: translate(2px, 0px) rotate(0.5deg); }
34% {
transform: translate(2px, 0px) rotate(0.5deg); }
36% {
transform: translate(0px, 0px) rotate(0.5deg); }
38% {
transform: translate(2px, 2px) rotate(0.5deg); }
40% {
transform: translate(2px, 2px) rotate(0.5deg); }
42% {
transform: translate(2px, 2px) rotate(0.5deg); }
44% {
transform: translate(2px, 0px) rotate(0.5deg); }
46% {
transform: translate(0px, 0px) rotate(0.5deg); }
48% {
transform: translate(2px, 2px) rotate(0.5deg); }
50% {
transform: translate(2px, 0px) rotate(0.5deg); }
52% {
transform: translate(0px, 0px) rotate(0.5deg); }
54% {
transform: translate(0px, 0px) rotate(0.5deg); }
56% {
transform: translate(2px, 0px) rotate(0.5deg); }
58% {
transform: translate(2px, 2px) rotate(0.5deg); }
60% {
transform: translate(2px, 2px) rotate(0.5deg); }
62% {
transform: translate(2px, 2px) rotate(0.5deg); }
64% {
transform: translate(2px, 2px) rotate(0.5deg); }
66% {
transform: translate(0px, 0px) rotate(0.5deg); }
68% {
transform: translate(2px, 2px) rotate(0.5deg); }
70% {
transform: translate(2px, 0px) rotate(0.5deg); }
72% {
transform: translate(2px, 0px) rotate(0.5deg); }
74% {
transform: translate(2px, 2px) rotate(0.5deg); }
76% {
transform: translate(0px, 2px) rotate(0.5deg); }
78% {
transform: translate(0px, 0px) rotate(0.5deg); }
80% {
transform: translate(0px, 0px) rotate(0.5deg); }
82% {
transform: translate(0px, 0px) rotate(0.5deg); }
84% {
transform: translate(0px, 0px) rotate(0.5deg); }
86% {
transform: translate(2px, 0px) rotate(0.5deg); }
88% {
transform: translate(2px, 2px) rotate(0.5deg); }
90% {
transform: translate(2px, 2px) rotate(0.5deg); }
92% {
transform: translate(2px, 0px) rotate(0.5deg); }
94% {
transform: translate(2px, 0px) rotate(0.5deg); }
96% {
transform: translate(2px, 2px) rotate(0.5deg); }
98% {
transform: translate(2px, 2px) rotate(0.5deg); }
0%, 100% {
transform: translate(0, 0) rotate(0); } }
/*=========================== shake end ==============================*/
@keyframes spin {
0% { transform: rotate(0deg); }
0.1% { transform: rotate(-60deg); }
0.2% { transform: rotate(-144deg); }
0.25% { transform: rotate(-252deg); }
0.3% { transform: rotate(-396deg); }
0.35% { transform: rotate(-576deg); }
0.4% { transform: rotate(-792deg); }
0.45% { transform: rotate(-1152deg); }
0.5% { transform: rotate(-1632deg); }
0.6% { transform: rotate(-2352deg); }
0.7% { transform: rotate(-4012deg); }
2.1% { transform: rotate(-56856deg); }
2.2% { transform: rotate(-58514deg); }
2.3% { transform: rotate(-59234deg); }
2.4% { transform: rotate(-59703deg); }
2.5% { transform: rotate(-60063deg); }
2.6% { transform: rotate(-60279deg); }
2.7% { transform: rotate(-60603deg); }
2.8% { transform: rotate(-60711deg); }
100% { transform: rotate(-82656deg); }
}
@keyframes scale-up {
0% { transform: scale(0.5); }
0.5% { transform: scale(0.5); }
1% { transform: scale(2.5); }
2% { transform: scale(2.5); }
2.3% { transform: scale(0.5) translate(200px,-200px); }
100% { }
}
@keyframes appear-hos {
0% { }
0.04% { opacity: 1; }
100% { opacity: 1; }
}
html {
animation-name: shake;
animation-duration: 100ms;
animation-timing-function: ease-in-out;
animation-iteration-count: 190;
animation-delay: 6.5s;
}
body {
animation-name: shake-little;
animation-duration: 100ms;
animation-timing-function: ease-in-out;
animation-iteration-count: 245;
animation-delay: 3s;
}
.open_article {
display:none;
}
#header {
z-index: 2000;
}
#title {
overflow: visible;
animation: 1000s fall-header ease-out 8.5s;
}
#TITLEBACKGROUND {
background-position: center;
}
#shareMenu { z-index: 2000 }
#shareMenu > * {
animation: 1000s fall-sharemenu cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
#wrap {
overflow: visible;
}
.sigong div {
width: 300px; height:300px;
min-width: 300px;
top: 0; left: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.sigong .sigong_detail1 {
position: absolute;
background-image: url('http://cfile263.uf.daum.net/image/2120C1435920967129707D');
}
.sigong .sigong_detail2 {
background-image: url('http://cfile290.uf.daum.net/image/2720604359209677295E2D');
animation: spin 1000s linear infinite;
}
}
#user_contents {
overflow: visible !important;
}
.hos {
background-image: url(http://cfile278.uf.daum.net/image/2124B4435920967229A02D);
background-size: contain;
background-position: center;
}
audio {
visibility: hidden;
}
/* ================================================================================================
미디어쿼리
================================================================================================ */
@media screen and (min-width: 480px) { /* vw>480px */
.sigong {
position: absolute;
right: 50%;
margin-top: 298px;
margin-right: -150px;
animation: scale-up 1000s linear infinite;
z-index: 1000;
}
.hos {
opacity: 0;
animation: 1000s appear-hos linear 23s;
width: 708px;
height: 700px;
position: absolute;
right: 50%;
margin-top: 50px;
margin-right: -405px;
}
}
@media screen and (max-width: 480px) { /* vw<480px */ @keyframes scale-up { 0% { transform: scale(0.5); } 0.5% { transform: scale(0.5); } 1% { transform: scale(1.2); } 2% { transform: scale(1.2); } 2.5% { transform: scale(0.21) translate(33%,-47%) } 100% { } } @keyframes mobile_comment1 { 0% {} 0.5% { transform: translate(0,-100px) scale(0.4) rotate(-225deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_comment2 { 0% {} 0.5% { transform: translate(0,-200px) scale(0.4) rotate(-45deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_comment3 { 0% {} 0.5% { transform: translate(0,-300%) scale(0.4) rotate(70deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_comment4 { 0% {} 0.5% { transform: translate(0,-400%) scale(0.4) rotate(-80deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_comment5 { 0% {} 0.5% { transform: translate(0,-500%) scale(0.4) rotate(200deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_subject { 0% {} 1% { transform: translate(0,250px) scale(0.2) rotateX(60deg) rotateY(60deg) rotateZ(360deg); opacity: 1; } 1.05% { opacity: 0; } 100% {} } @keyframes mobile_navi { 0% {} 0.6% { transform: translate(0,350px) scale(0.5) rotate(-145deg); opacity: 1; } 0.65% { opacity: 0; } 100% {} } @keyframes mobile_tabcafe { 0% {} 0.6% { transform: translate(0,-100px) scale(0.2) rotate(-145deg); opacity: 1; } 0.65% { opacity: 0; } 100% {} } @keyframes mobile_optionbtn1 { 0% {} 0.6% { transform: translate(-65px,-10px) scale(0.5); opacity: 1; } 0.65% { opacity: 0; } 100% {} } @keyframes mobile_optionbtn2 { 0% {} 0.6% { transform: translate(-100px,-10px) scale(0.5); opacity: 1; } 0.65% { opacity: 0; } 100% {} } @keyframes fall-nickzzal { 0% { } 0.5% { transform: translate(120px,150px) rotate(200deg) rotateX(60deg) rotateY(60deg) scale(0.2); opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } html, body { overflow: hidden; } .sigong div { width: 100%; } .sigong { animation: scale-up 1000s linear infinite; width: 100%; z-index: 1000; display: table-cell; } .hos { position: absolute; width: 100%; left: 0; opacity: 0; z-index: -1; animation: 1000s appear-hos linear 23s; } .mobilebox { position: absolute; display: table; top: 0; left: 0; width: 100%; height: 375px; vertical-align: middle; } .list_cmt > li:nth-child(1) { position: relative; animation: 1000s mobile_comment1 linear 6s; z-index: 2000; } .list_cmt > li:nth-child(2) { position: relative; animation: 1000s mobile_comment2 linear 6.4s; z-index: 2000; } .list_cmt > li:nth-child(3) { position: relative; animation: 1000s mobile_comment3 linear 6.8s; z-index: 2000; } .list_cmt > li:nth-child(4) { position: relative; animation: 1000s mobile_comment4 linear 7.2s; z-index: 2000; } .list_cmt > li:nth-child(5) {
position: relative;
animation: 1000s mobile_comment5 linear 7.6s;
z-index: 2000;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment