Created
September 30, 2017 06:05
-
-
Save kjsman/18c1097a087f755faaa67979e46b0626 to your computer and use it in GitHub Desktop.
시공을 위한 CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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