Skip to content

Instantly share code, notes, and snippets.

@mu-hun

mu-hun/sigon.css

Last active December 6, 2017 09:19
Show Gist options
  • Save mu-hun/e7a19459c84b8e155d93e223bb5143e6 to your computer and use it in GitHub Desktop.
Save mu-hun/e7a19459c84b8e155d93e223bb5143e6 to your computer and use it in GitHub Desktop.
Download ZIP
Heroes of the Storm memes for seogwipo.jje.hs.kr, YouTube : https://youtu.be/2AR-Z1QKcLw
Raw
sigon.css
/* ================================================================================================
KEYFRAMES
================================================================================================ */
@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 remove-border {
0% {}
1% {
border-color: rgba(255, 255, 255, 0);
background-color: rgba(255, 255, 255, 0);
}
100% {}
}
@keyframes fall-header {
0% {
top: 0;
}
0.6% {
opacity: 1;
}
0.7% {
top: 350px;
transform: scale(0) perspective(450px) rotateY(155deg) rotateZ(100deg);
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-sharemenu {
0% {}
0.5% {
transform: translate(-100%, 0%) rotate(-270deg) scale(0.2);
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-search_box {
0% {}
0.4% {
transform: translate(-10%, -500%) rotate(400deg) scale(0);
opacity: 1;
}
0.45% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-list_btn_top_right {
0% {}
0.5% {
transform: translate(45vw, 212px) rotate(180deg) scale(0.2);
transform-origin: left;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-list_btn_top_left {
0% {}
0.5% {
transform: translate(-45vw, 212px) rotate(180deg) scale(0.2);
transform-origin: left;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-list_btn_bottom_right {
0% {}
0.5% {
transform: translate(45vw, -212px) rotate(180deg) scale(0.2);
transform-origin: left;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-list_btn_bottom_left {
0% {}
0.5% {
transform: translate(-45vw, -312px) rotate(180deg) scale(0.2);
transform-origin: left;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-cafemenu {
0% {}
0.7% {
transform: translate(44vw, -42%) rotate(345deg) scale(0.05);
opacity: 1;
}
0.75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-tops {
0% {}
0.7% {
transform: translate(44vw, 42%) rotate(345deg) scale(0.05);
opacity: 1;
}
0.75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-commentDiv {
0% {}
1% {
transform: translate(-6vw, -8vw) rotateX(230deg) rotateY(240deg) scale(0.05);
opacity: 1;
transform-origin: top;
}
1.1% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-subject {
0% {}
0.5% {
transform: translate(45vw, 190px) rotate(50deg) scale(0.4);
transform-origin: right;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-writer {
0% {}
0.5% {
transform: translate(40vw, 180px) rotate(-60deg) scale(0.4);
transform-origin: right;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-url {
0% {}
0.5% {
transform: translate(45vw, 180px) rotate(-45deg) scale(0.2);
transform-origin: right;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-comment_cnt {
0% {}
0.5% {
transform: translate(40vw, -82px) rotate(180deg) scale(0.2);
transform-origin: left;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-ccl {
0% {}
0.5% {
transform: translate(-44vw, -42px) scale(0.5);
transform-origin: left;
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes appear-hos {
0% {}
0.04% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes fall-paging {
0% {}
0.5% {
transform: rotate(-45deg) translate(7vw, -400px) scale(0.5);
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-minidaum {
0% {}
0.5% {
transform: rotate(-48deg) translate(-45vw) scale(0.5);
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fall-nickzzal {
0% {}
0.5% {
transform: translate(387px, 22px) rotate(200deg) rotateX(60deg) rotateY(60deg) scale(0.1);
opacity: 1;
}
0.55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* ================================================================================================
STYLE
================================================================================================ */
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;
}
.viewBox {
z-index: 0;
}
header {
z-index: 2000;
}
#pageTitle {
overflow: visible;
animation: 1000s fall-header ease-out 8.5s;
}
.tit {
overflow: visible;
animation: 1000s fall-header ease-out 8.5s;
}
.snsBox {
z-index: 2000
}
.snsBox > .btnShare {
animation: 1000s fall-sharemenu cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
.snsBox > .sns_more .btnFbook{
animation: 1000s fall-sharemenu cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
.snsBox > .sns_more .btnTwt {
animation: 1000s fall-sharemenu cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
.snsBox > .sns_more .btnInstar {
animation: 1000s fall-sharemenu cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
#wrap {
overflow: visible;
}
.survey {
animation: 1000s fall-search_box ease 6s;
}
.infoBox > li {
animation: 1000s fall-list_btn_top_right cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
#location > a {
animation: 1000s fall-list_btn_top_left cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
#location > strong {
animation: 1000s fall-list_btn_top_left cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
#location > span {
animation: 1000s fall-list_btn_top_left cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
#webNavi > .mNavi {
animation: 1000s fall-tops linear 7s;
z-index: 2000;
}
.S_visual {
animation: 1000s fall-tops linear 7s;
z-index: 2000;
}
.pt10>a {
animation: 1000s fall-list_btn_bottom_right cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
.listNavi>ul {
animation: 1000s fall-list_btn_bottom_left cubic-bezier(0.85, 0.18, 1, 1.01) 7s;
z-index: 2000;
}
#sideContent, .top_menu {
animation: 1000s fall-cafemenu linear 7s;
z-index: 2000;
}
.top_menu {
animation: 1000s fall-tops linear 7s;
z-index: 2000;
}
.subject>span,
.subject>a {
animation: 1000s fall-subject linear 7s;
z-index: 2000;
}
footer {
display: none;
}
.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_detail2 {
background-image: url('http://i.imgur.com/I7t6r1t.png');
animation: spin 1000s linear infinite;
}
.sigong .sigong_detail1 {
position: absolute;
background-image: url('http://cfile263.uf.daum.net/image/2120C1435920967129707D');
}
.nickzzal img {
position: absolute;
top: -50px;
width: 110px;
z-index: 2000;
animation: 1000s fall-nickzzal linear 6s;
}
#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: -100px;
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: -338px;
margin-right: -255px;
}
}
@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;
}
.view_subject {
animation: 1000s mobile_subject linear 10s;
z-index: 2000;
}
.cafe_navi {
animation: 1000s mobile_navi linear 7s;
z-index: 2000;
}
.tab_cafe {
animation: 1000s mobile_tabcafe linear 9s;
z-index: 2000;
position: relative;
}
.detail_btns {
animation: 1000s mobile_optionbtn1 linear 6s;
z-index: 2000;
position: relative;
}
.article_more {
animation: 1000s mobile_optionbtn2 linear 6.5s;
z-index: 2000;
position: relative;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment