아 흔들고 싶다
컨텐츠 정보
- 151 조회
- 0 추천
- 목록
본문
아 흔들고 싶다.@charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Gentium+Basic);@import url(https://fonts.googleapis.com/css?family=Dancing+Script);.shake {display: inline-block;transform-origin: center center;}.shake:hover {animation-name: shake-base;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.freez {animation-name: shake-base;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;animation-play-state: paused;}.shake.freez.shake-hard {animation-name: shake-hard;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.freez.shake-slow {animation-name: shake-slow;animation-duration: 5s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.freez.shake-little {animation-name: shake-little;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.freez.shake-horizontal {animation-name: shake-horizontal;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.freez.shake-vertical {animation-name: shake-vertical;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.freez.shake-rotate {animation-name: shake-rotate;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.freez.shake-opacity {animation-name: shake-opacity;animation-duration: 200ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.freez.shake-crazy {animation-name: shake-crazy;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.freez:hover {animation-play-state: running;}.shake.shake-hard:hover {animation-name: shake-hard;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-slow:hover {animation-name: shake-slow;animation-duration: 5s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-little:hover {animation-name: shake-little;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-horizontal:hover {animation-name: shake-horizontal;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-vertical:hover {animation-name: shake-vertical;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-rotate:hover {animation-name: shake-rotate;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-opacity:hover {animation-name: shake-opacity;animation-duration: 200ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-crazy:hover {animation-name: shake-crazy;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}* {animation-name: shake-base;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-constant.shake-hard {animation-name: shake-hard;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-constant.shake-slow {animation-name: shake-slow;animation-duration: 5s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-constant.shake-little {animation-name: shake-little;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-constant.shake-horizontal {animation-name: shake-horizontal;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-constant.shake-vertical {animation-name: shake-vertical;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-constant.shake-rotate {animation-name: shake-rotate;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-constant.shake-opacity {animation-name: shake-opacity;animation-duration: 200ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-constant.shake-crazy {animation-name: shake-crazy;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 0s;}.shake.shake-constant.hover-stop:hover {animation-play-state: paused;}.shake.shake-delay {animation-name: shake-base;animation-duration: 100ms;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-delay: 4s;}@keyframes shake-base {0% {transform: translate(0px, 0px) rotate(0deg);}2% {transform: translate(-0.5px, 1.5px) rotate(1.5deg);}4% {transform: translate(2.5px, -0.5px) rotate(1.5deg);}6% {transform: translate(0.5px, -0.5px) rotate(1.5deg);}8% {transform: translate(1.5px, -1.5px) rotate(1.5deg);}10% {transform: translate(-0.5px, -0.5px) rotate(-0.5deg);}12% {transform: translate(-1.5px, 0.5px) rotate(-0.5deg);}14% {transform: translate(-1.5px, 1.5px) rotate(-0.5deg);}16% {transform: translate(2.5px, -0.5px) rotate(0.5deg);}18% {transform: translate(-1.5px, 0.5px) rotate(0.5deg);}20% {transform: translate(2.5px, -0.5px) rotate(-0.5deg);}22% {transform: translate(-0.5px, 0.5px) rotate(-0.5deg);}24% {transform: translate(-1.5px, -0.5px) rotate(0.5deg);}26% {transform: translate(-1.5px, -0.5px) rotate(0.5deg);}28% {transform: translate(-1.5px, -1.5px) rotate(1.5deg);}30% {transform: translate(-0.5px, 0.5px) rotate(-0.5deg);}32% {transform: translate(-1.5px, -1.5px) rotate(1.5deg);}34% {transform: translate(-0.5px, -0.5px) rotate(0.5deg);}36% {transform: translate(1.5px, 0.5px) rotate(-0.5deg);}38% {transform: translate(2.5px, -0.5px) rotate(1.5deg);}40% {transform: translate(0.5px, -1.5px) rotate(0.5deg);}42% {transform: translate(2.5px, -0.5px) rotate(-0.5deg);}44% {transform: translate(1.5px, 1.5px) rotate(0.5deg);}46% {transform: translate(0.5px, -1.5px) rotate(1.5deg);}48% {transform: translate(-1.5px, -0.5px) rotate(-0.5deg);}50% {transform: translate(1.5px, -0.5px) rotate(-0.5deg);}52% {transform: translate(2.5px, -1.5px) rotate(-0.5deg);}54% {transform: translate(2.5px, 1.5px) rotate(0.5deg);}56% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}58% {transform: translate(1.5px, 1.5px) rotate(-0.5deg);}60% {transform: translate(2.5px, -0.5px) rotate(1.5deg);}62% {transform: translate(1.5px, -0.5px) rotate(1.5deg);}64% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}66% {transform: translate(0.5px, 2.5px) rotate(0.5deg);}68% {transform: translate(-1.5px, 0.5px) rotate(-0.5deg);}70% {transform: translate(-1.5px, 2.5px) rotate(0.5deg);}72% {transform: translate(-0.5px, 1.5px) rotate(-0.5deg);}74% {transform: translate(1.5px, 1.5px) rotate(0.5deg);}76% {transform: translate(-0.5px, 1.5px) rotate(0.5deg);}78% {transform: translate(2.5px, 1.5px) rotate(-0.5deg);}80% {transform: translate(2.5px, -0.5px) rotate(1.5deg);}82% {transform: translate(-1.5px, -1.5px) rotate(0.5deg);}84% {transform: translate(2.5px, 0.5px) rotate(-0.5deg);}86% {transform: translate(1.5px, 2.5px) rotate(-0.5deg);}88% {transform: translate(-0.5px, 0.5px) rotate(0.5deg);}90% {transform: translate(-1.5px, 2.5px) rotate(-0.5deg);}92% {transform: translate(-0.5px, -1.5px) rotate(-0.5deg);}94% {transform: translate(1.5px, 2.5px) rotate(-0.5deg);}96% {transform: translate(0.5px, -1.5px) rotate(0.5deg);}98% {transform: translate(2.5px, 1.5px) rotate(1.5deg);}}@keyframes shake-little {0% {transform: translate(0px, 0px) rotate(0deg);}2% {transform: translate(1px, 1px) rotate(0.5deg);}4% {transform: translate(0px, 0px) rotate(0.5deg);}6% {transform: translate(1px, 1px) rotate(0.5deg);}8% {transform: translate(0px, 1px) rotate(0.5deg);}10% {transform: translate(1px, 1px) rotate(0.5deg);}12% {transform: translate(0px, 1px) rotate(0.5deg);}14% {transform: translate(0px, 1px) rotate(0.5deg);}16% {transform: translate(1px, 0px) rotate(0.5deg);}18% {transform: translate(0px, 0px) rotate(0.5deg);}20% {transform: translate(0px, 0px) rotate(0.5deg);}22% {transform: translate(1px, 0px) rotate(0.5deg);}24% {transform: translate(0px, 1px) rotate(0.5deg);}26% {transform: translate(0px, 0px) rotate(0.5deg);}28% {transform: translate(0px, 0px) rotate(0.5deg);}30% {transform: translate(1px, 1px) rotate(0.5deg);}32% {transform: translate(1px, 1px) rotate(0.5deg);}34% {transform: translate(1px, 0px) rotate(0.5deg);}36% {transform: translate(0px, 1px) rotate(0.5deg);}38% {transform: translate(1px, 0px) rotate(0.5deg);}40% {transform: translate(1px, 1px) rotate(0.5deg);}42% {transform: translate(0px, 0px) rotate(0.5deg);}44% {transform: translate(1px, 0px) rotate(0.5deg);}46% {transform: translate(1px, 1px) rotate(0.5deg);}48% {transform: translate(0px, 1px) rotate(0.5deg);}50% {transform: translate(1px, 0px) rotate(0.5deg);}52% {transform: translate(0px, 0px) rotate(0.5deg);}54% {transform: translate(1px, 1px) rotate(0.5deg);}56% {transform: translate(0px, 0px) rotate(0.5deg);}58% {transform: translate(0px, 0px) rotate(0.5deg);}60% {transform: translate(1px, 0px) rotate(0.5deg);}62% {transform: translate(1px, 0px) rotate(0.5deg);}64% {transform: translate(1px, 0px) rotate(0.5deg);}66% {transform: translate(1px, 0px) rotate(0.5deg);}68% {transform: translate(0px, 0px) rotate(0.5deg);}70% {transform: translate(0px, 0px) rotate(0.5deg);}72% {transform: translate(0px, 0px) rotate(0.5deg);}74% {transform: translate(0px, 1px) rotate(0.5deg);}76% {transform: translate(0px, 1px) rotate(0.5deg);}78% {transform: translate(0px, 1px) rotate(0.5deg);}80% {transform: translate(0px, 1px) rotate(0.5deg);}82% {transform: translate(1px, 0px) rotate(0.5deg);}84% {transform: translate(1px, 1px) rotate(0.5deg);}86% {transform: translate(0px, 0px) rotate(0.5deg);}88% {transform: translate(1px, 1px) rotate(0.5deg);}90% {transform: translate(1px, 1px) rotate(0.5deg);}92% {transform: translate(0px, 0px) rotate(0.5deg);}94% {transform: translate(1px, 1px) rotate(0.5deg);}96% {transform: translate(1px, 1px) rotate(0.5deg);}98% {transform: translate(0px, 0px) rotate(0.5deg);}}@keyframes shake-slow {0% {transform: translate(0px, 0px) rotate(0deg);}2% {transform: translate(3px, -9px) rotate(1.5deg);}4% {transform: translate(7px, -8px) rotate(2.5deg);}6% {transform: translate(-6px, -1px) rotate(-1.5deg);}8% {transform: translate(-5px, 0px) rotate(-1.5deg);}10% {transform: translate(9px, 9px) rotate(3.5deg);}12% {transform: translate(3px, 7px) rotate(3.5deg);}14% {transform: translate(6px, 1px) rotate(-1.5deg);}16% {transform: translate(-8px, 10px) rotate(-2.5deg);}18% {transform: translate(3px, -3px) rotate(1.5deg);}20% {transform: translate(-7px, -8px) rotate(1.5deg);}22% {transform: translate(9px, 5px) rotate(1.5deg);}24% {transform: translate(-8px, 2px) rotate(-1.5deg);}26% {transform: translate(2px, 2px) rotate(-2.5deg);}28% {transform: translate(1px, 9px) rotate(3.5deg);}30% {transform: translate(-6px, -3px) rotate(-0.5deg);}32% {transform: translate(-8px, -4px) rotate(-2.5deg);}34% {transform: translate(7px, 2px) rotate(3.5deg);}36% {transform: translate(-4px, 0px) rotate(-1.5deg);}38% {transform: translate(-2px, 8px) rotate(1.5deg);}40% {transform: translate(-6px, 9px) rotate(1.5deg);}42% {transform: translate(3px, 2px) rotate(1.5deg);}44% {transform: translate(0px, -7px) rotate(-2.5deg);}46% {transform: translate(-7px, -5px) rotate(-0.5deg);}48% {transform: translate(5px, -6px) rotate(2.5deg);}50% {transform: translate(-9px, 2px) rotate(1.5deg);}52% {transform: translate(6px, 8px) rotate(3.5deg);}54% {transform: translate(-2px, 5px) rotate(3.5deg);}56% {transform: translate(-1px, 3px) rotate(0.5deg);}58% {transform: translate(7px, 10px) rotate(-0.5deg);}60% {transform: translate(9px, -4px) rotate(-1.5deg);}62% {transform: translate(-5px, 7px) rotate(3.5deg);}64% {transform: translate(3px, 10px) rotate(-1.5deg);}66% {transform: translate(7px, 2px) rotate(-1.5deg);}68% {transform: translate(5px, -9px) rotate(1.5deg);}70% {transform: translate(-9px, 1px) rotate(2.5deg);}72% {transform: translate(5px, 6px) rotate(0.5deg);}74% {transform: translate(9px, -6px) rotate(3.5deg);}76% {transform: translate(8px, 4px) rotate(-2.5deg);}78% {transform: translate(-9px, -8px) rotate(-0.5deg);}80% {transform: translate(-2px, 3px) rotate(-2.5deg);}82% {transform: translate(8px, 0px) rotate(-2.5deg);}84% {transform: translate(-8px, 1px) rotate(0.5deg);}86% {transform: translate(-4px, -6px) rotate(-1.5deg);}88% {transform: translate(3px, 7px) rotate(2.5deg);}90% {transform: translate(9px, 5px) rotate(1.5deg);}92% {transform: translate(0px, -8px) rotate(3.5deg);}94% {transform: translate(-4px, 5px) rotate(3.5deg);}96% {transform: translate(4px, 0px) rotate(3.5deg);}98% {transform: translate(8px, -6px) rotate(2.5deg);}}@keyframes shake-hard {0% {transform: translate(0px, 0px) rotate(0deg);}2% {transform: translate(7px, -5px) rotate(2.5deg);}4% {transform: translate(7px, -8px) rotate(0.5deg);}6% {transform: translate(-3px, 0px) rotate(-1.5deg);}8% {transform: translate(-8px, 3px) rotate(-0.5deg);}10% {transform: translate(5px, -1px) rotate(3.5deg);}12% {transform: translate(8px, -1px) rotate(2.5deg);}14% {transform: translate(-6px, 0px) rotate(3.5deg);}16% {transform: translate(-7px, -7px) rotate(3.5deg);}18% {transform: translate(5px, -4px) rotate(-2.5deg);}20% {transform: translate(0px, 8px) rotate(2.5deg);}22% {transform: translate(5px, 9px) rotate(2.5deg);}24% {transform: translate(9px, 0px) rotate(2.5deg);}26% {transform: translate(10px, 10px) rotate(-1.5deg);}28% {transform: translate(-6px, 3px) rotate(2.5deg);}30% {transform: translate(6px, 2px) rotate(-0.5deg);}32% {transform: translate(-6px, 7px) rotate(2.5deg);}34% {transform: translate(9px, 9px) rotate(0.5deg);}36% {transform: translate(5px, 2px) rotate(-0.5deg);}38% {transform: translate(4px, 2px) rotate(-0.5deg);}40% {transform: translate(-6px, 4px) rotate(-0.5deg);}42% {transform: translate(10px, -6px) rotate(1.5deg);}44% {transform: translate(-2px, 1px) rotate(-0.5deg);}46% {transform: translate(-7px, 8px) rotate(1.5deg);}48% {transform: translate(-1px, 8px) rotate(1.5deg);}50% {transform: translate(1px, 7px) rotate(2.5deg);}52% {transform: translate(-5px, 10px) rotate(0.5deg);}54% {transform: translate(3px, 10px) rotate(1.5deg);}56% {transform: translate(1px, -9px) rotate(-0.5deg);}58% {transform: translate(3px, 9px) rotate(-0.5deg);}60% {transform: translate(-7px, -8px) rotate(-0.5deg);}62% {transform: translate(-6px, -9px) rotate(-2.5deg);}64% {transform: translate(-1px, -2px) rotate(0.5deg);}66% {transform: translate(8px, 9px) rotate(2.5deg);}68% {transform: translate(-2px, -1px) rotate(-0.5deg);}70% {transform: translate(-2px, 4px) rotate(2.5deg);}72% {transform: translate(-1px, 5px) rotate(1.5deg);}74% {transform: translate(-9px, 5px) rotate(1.5deg);}76% {transform: translate(8px, -1px) rotate(-1.5deg);}78% {transform: translate(0px, -7px) rotate(0.5deg);}80% {transform: translate(0px, 2px) rotate(2.5deg);}82% {transform: translate(-2px, 1px) rotate(1.5deg);}84% {transform: translate(-3px, 8px) rotate(2.5deg);}86% {transform: translate(-1px, -4px) rotate(-1.5deg);}88% {transform: translate(-3px, 6px) rotate(2.5deg);}90% {transform: translate(9px, -7px) rotate(-0.5deg);}92% {transform: translate(-6px, 1px) rotate(-1.5deg);}94% {transform: translate(3px, -5px) rotate(-1.5deg);}96% {transform: translate(9px, -6px) rotate(-2.5deg);}98% {transform: translate(10px, -7px) rotate(3.5deg);}}@keyframes shake-horizontal {0% {transform: translate(0px, 0px) rotate(0deg);}2% {transform: translate(7px, 0px) rotate(0deg);}4% {transform: translate(-7px, 0px) rotate(0deg);}6% {transform: translate(4px, 0px) rotate(0deg);}8% {transform: translate(7px, 0px) rotate(0deg);}10% {transform: translate(5px, 0px) rotate(0deg);}12% {transform: translate(-6px, 0px) rotate(0deg);}14% {transform: translate(-4px, 0px) rotate(0deg);}16% {transform: translate(6px, 0px) rotate(0deg);}18% {transform: translate(0px, 0px) rotate(0deg);}20% {transform: translate(-8px, 0px) rotate(0deg);}22% {transform: translate(-7px, 0px) rotate(0deg);}24% {transform: translate(-8px, 0px) rotate(0deg);}26% {transform: translate(-6px, 0px) rotate(0deg);}28% {transform: translate(-2px, 0px) rotate(0deg);}30% {transform: translate(0px, 0px) rotate(0deg);}32% {transform: translate(-3px, 0px) rotate(0deg);}34% {transform: translate(-4px, 0px) rotate(0deg);}36% {transform: translate(8px, 0px) rotate(0deg);}38% {transform: translate(-1px, 0px) rotate(0deg);}40% {transform: translate(0px, 0px) rotate(0deg);}42% {transform: translate(4px, 0px) rotate(0deg);}44% {transform: translate(9px, 0px) rotate(0deg);}46% {transform: translate(2px, 0px) rotate(0deg);}48% {transform: translate(-4px, 0px) rotate(0deg);}50% {transform: translate(3px, 0px) rotate(0deg);}52% {transform: translate(1px, 0px) rotate(0deg);}54% {transform: translate(6px, 0px) rotate(0deg);}56% {transform: translate(-9px, 0px) rotate(0deg);}58% {transform: translate(7px, 0px) rotate(0deg);}60% {transform: translate(-2px, 0px) rotate(0deg);}62% {transform: translate(3px, 0px) rotate(0deg);}64% {transform: translate(-5px, 0px) rotate(0deg);}66% {transform: translate(10px, 0px) rotate(0deg);}68% {transform: translate(-5px, 0px) rotate(0deg);}70% {transform: translate(-4px, 0px) rotate(0deg);}72% {transform: translate(1px, 0px) rotate(0deg);}74% {transform: translate(2px, 0px) rotate(0deg);}76% {transform: translate(3px, 0px) rotate(0deg);}78% {transform: translate(-2px, 0px) rotate(0deg);}80% {transform: translate(-9px, 0px) rotate(0deg);}82% {transform: translate(0px, 0px) rotate(0deg);}84% {transform: translate(10px, 0px) rotate(0deg);}86% {transform: translate(-4px, 0px) rotate(0deg);}88% {transform: translate(8px, 0px) rotate(0deg);}90% {transform: translate(3px, 0px) rotate(0deg);}92% {transform: translate(5px, 0px) rotate(0deg);}94% {transform: translate(2px, 0px) rotate(0deg);}96% {transform: translate(-3px, 0px) rotate(0deg);}98% {transform: translate(4px, 0px) rotate(0deg);}}@keyframes shake-vertical {0% {transform: translate(0px, 0px) rotate(0deg);}2% {transform: translate(0px, 4px) rotate(0deg);}4% {transform: translate(0px, 1px) rotate(0deg);}6% {transform: translate(0px, 10px) rotate(0deg);}8% {transform: translate(0px, -5px) rotate(0deg);}10% {transform: translate(0px, -8px) rotate(0deg);}12% {transform: translate(0px, -6px) rotate(0deg);}14% {transform: translate(0px, -5px) rotate(0deg);}16% {transform: translate(0px, 5px) rotate(0deg);}18% {transform: translate(0px, -1px) rotate(0deg);}20% {transform: translate(0px, -4px) rotate(0deg);}22% {transform: translate(0px, -6px) rotate(0deg);}24% {transform: translate(0px, 8px) rotate(0deg);}26% {transform: translate(0px, -3px) rotate(0deg);}28% {transform: translate(0px, -9px) rotate(0deg);}30% {transform: translate(0px, 4px) rotate(0deg);}32% {transform: translate(0px, 10px) rotate(0deg);}34% {transform: translate(0px, -2px) rotate(0deg);}36% {transform: translate(0px, 1px) rotate(0deg);}38% {transform: translate(0px, 4px) rotate(0deg);}40% {transform: translate(0px, -7px) rotate(0deg);}42% {transform: translate(0px, 4px) rotate(0deg);}44% {transform: translate(0px, 8px) rotate(0deg);}46% {transform: translate(0px, 9px) rotate(0deg);}48% {transform: translate(0px, 9px) rotate(0deg);}50% {transform: translate(0px, -5px) rotate(0deg);}52% {transform: translate(0px, -9px) rotate(0deg);}54% {transform: translate(0px, 10px) rotate(0deg);}56% {transform: translate(0px, 4px) rotate(0deg);}58% {transform: translate(0px, 6px) rotate(0deg);}60% {transform: translate(0px, 2px) rotate(0deg);}62% {transform: translate(0px, 6px) rotate(0deg);}64% {transform: translate(0px, -6px) rotate(0deg);}66% {transform: translate(0px, 6px) rotate(0deg);}68% {transform: translate(0px, -9px) rotate(0deg);}70% {transform: translate(0px, -5px) rotate(0deg);}72% {transform: translate(0px, 1px) rotate(0deg);}74% {transform: translate(0px, 0px) rotate(0deg);}76% {transform: translate(0px, 2px) rotate(0deg);}78% {transform: translate(0px, 8px) rotate(0deg);}80% {transform: translate(0px, 9px) rotate(0deg);}82% {transform: translate(0px, 9px) rotate(0deg);}84% {transform: translate(0px, 1px) rotate(0deg);}86% {transform: translate(0px, -6px) rotate(0deg);}88% {transform: translate(0px, 4px) rotate(0deg);}90% {transform: translate(0px, 3px) rotate(0deg);}92% {transform: translate(0px, 6px) rotate(0deg);}94% {transform: translate(0px, 3px) rotate(0deg);}96% {transform: translate(0px, 0px) rotate(0deg);}98% {transform: translate(0px, 3px) rotate(0deg);}}@keyframes shake-rotate {0% {transform: translate(0px, 0px) rotate(0deg);}2% {transform: translate(0px, 0px) rotate(1.5deg);}4% {transform: translate(0px, 0px) rotate(-5.5deg);}6% {transform: translate(0px, 0px) rotate(-1.5deg);}8% {transform: translate(0px, 0px) rotate(-3.5deg);}10% {transform: translate(0px, 0px) rotate(6.5deg);}12% {transform: translate(0px, 0px) rotate(1.5deg);}14% {transform: translate(0px, 0px) rotate(0.5deg);}16% {transform: translate(0px, 0px) rotate(-0.5deg);}18% {transform: translate(0px, 0px) rotate(-5.5deg);}20% {transform: translate(0px, 0px) rotate(5.5deg);}22% {transform: translate(0px, 0px) rotate(-2.5deg);}24% {transform: translate(0px, 0px) rotate(-3.5deg);}26% {transform: translate(0px, 0px) rotate(1.5deg);}28% {transform: translate(0px, 0px) rotate(0.5deg);}30% {transform: translate(0px, 0px) rotate(7.5deg);}32% {transform: translate(0px, 0px) rotate(-4.5deg);}34% {transform: translate(0px, 0px) rotate(-6.5deg);}36% {transform: translate(0px, 0px) rotate(7.5deg);}38% {transform: translate(0px, 0px) rotate(5.5deg);}40% {transform: translate(0px, 0px) rotate(6.5deg);}42% {transform: translate(0px, 0px) rotate(-1.5deg);}44% {transform: translate(0px, 0px) rotate(2.5deg);}46% {transform: translate(0px, 0px) rotate(-2.5deg);}48% {transform: translate(0px, 0px) rotate(3.5deg);}50% {transform: translate(0px, 0px) rotate(7.5deg);}52% {transform: translate(0px, 0px) rotate(0.5deg);}54% {transform: translate(0px, 0px) rotate(6.5deg);}56% {transform: translate(0px, 0px) rotate(-6.5deg);}58% {transform: translate(0px, 0px) rotate(-5.5deg);}60% {transform: translate(0px, 0px) rotate(-2.5deg);}62% {transform: translate(0px, 0px) rotate(6.5deg);}64% {transform: translate(0px, 0px) rotate(-3.5deg);}66% {transform: translate(0px, 0px) rotate(-6.5deg);}68% {transform: translate(0px, 0px) rotate(7.5deg);}70% {transform: translate(0px, 0px) rotate(2.5deg);}72% {transform: translate(0px, 0px) rotate(-6.5deg);}74% {transform: translate(0px, 0px) rotate(-3.5deg);}76% {transform: translate(0px, 0px) rotate(6.5deg);}78% {transform: translate(0px, 0px) rotate(-4.5deg);}80% {transform: translate(0px, 0px) rotate(5.5deg);}82% {transform: translate(0px, 0px) rotate(-0.5deg);}84% {transform: translate(0px, 0px) rotate(-6.5deg);}86% {transform: translate(0px, 0px) rotate(-3.5deg);}88% {transform: translate(0px, 0px) rotate(1.5deg);}90% {transform: translate(0px, 0px) rotate(2.5deg);}92% {transform: translate(0px, 0px) rotate(-2.5deg);}94% {transform: translate(0px, 0px) rotate(1.5deg);}96% {transform: translate(0px, 0px) rotate(0.5deg);}98% {transform: translate(0px, 0px) rotate(-1.5deg);}}@keyframes shake-opacity {0% {transform: translate(0px, 0px) rotate(0deg);opacity: 0.2;}10% {transform: translate(-2px, 0px) rotate(-0.5deg);opacity: 1;}20% {transform: translate(-1px, -4px) rotate(-1.5deg);opacity: 0.5;}30% {transform: translate(4px, 0px) rotate(1.5deg);opacity: 1;}40% {transform: translate(3px, -4px) rotate(0.5deg);opacity: 0.6;}50% {transform: translate(0px, 0px) rotate(-1.5deg);opacity: 0.9;}60% {transform: translate(-1px, -3px) rotate(0.5deg);opacity: 1;}70% {transform: translate(0px, 2px) rotate(0.5deg);opacity: 0.9;}80% {transform: translate(2px, 1px) rotate(-1.5deg);opacity: 1;}90% {transform: translate(4px, -2px) rotate(2.5deg);opacity: 0.1;}}@keyframes shake-crazy {0% {transform: translate(0px, 0px) rotate(0deg);opacity: 0.7;}10% {transform: translate(-4px, 20px) rotate(-3deg);opacity: 0.8;}20% {transform: translate(16px, 11px) rotate(9deg);opacity: 0.2;}30% {transform: translate(-2px, 12px) rotate(4deg);opacity: 1;}40% {transform: translate(6px, -3px) rotate(-7deg);opacity: 0.9;}50% {transform: translate(6px, -3px) rotate(-2deg);opacity: 0.4;}60% {transform: translate(-7px, 20px) rotate(10deg);opacity: 0.6;}70% {transform: translate(1px, -2px) rotate(-2deg);opacity: 0.5;}80% {transform: translate(19px, -4px) rotate(-5deg);opacity: 0.5;}90% {transform: translate(-12px, 7px) rotate(-7deg);opacity: 0.8;}}/* apply a natural box layout model to all elements */*, *:before, *:after {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}body {background: #2ab8ac;}header {width: 100%;background-color: #ffab52;text-align: center;line-height: 1.5em;font-family: 'Gentium Basic', serif;padding: 5px 0;font-size: .85em;opacity: 0;color: #fff68d;visibility: hidden;animation: op 15s forwards;}header a {text-decoration: none;color: rgba(0, 0, 0, 0.7);}header a:hover {color: rgba(0, 0, 0, 0.94);}@keyframes op {10%,90% {opacity: 1;visibility: visible;}}.section {color: white;text-align: center;height: 100%;padding-top: 20px;}.section h1 {font-family: 'Dancing Script', cursive;font-size: 5em;}.section h4 {font-size: 1.4em;font-family: 'Gentium Basic', serif;}.section > p {margin-top: 25px;line-height: 1.5em;}.section a {color: rgba(0, 0, 0, 0.5);}.section a:link {text-decoration: none;}.section a:hover {color: rgba(0, 0, 0, 0.85);}.section footer {width: 100%;line-height: 1.3em;margin-top: 50px;margin-bottom: 20px;}.arrow {position: absolute;bottom: 20px;left: 50%;margin-left: -10px;width: 0;height: 0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-top: 15px solid rgba(255, 255, 255, 0.3);;}.arrow:before {content: '';position: absolute;top: -15px;left: -8px;width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;}.section.shamrock .arrow:before {border-top: 10px solid #2ab8ac;}.section.carrot .arrow:before {border-top: 10px solid #ffab52;}.section.amethyst .arrow:before {border-top: 10px solid #9c55a5;}.section.scooter .arrow:before {border-top: 10px solid #57cadd;}.section.dolly .arrow:before {border-top: 10px solid #fff68d;}.section.shamrock .arrow:before {border-top: 10px solid #2ab8ac;}.section.pear .arrow:before {border-top: 10px solid #cce033;}.section.carrot {background-color: #ffab52;}.section.amethyst {background-color: #9c55a5;}.section.scooter {background-color: #57cadd;}.section.dolly {background-color: #fff68d;color: #2C3E50;}.section.shamrock {background-color: #2ab8ac;}.section.pear {background-color: #cce033;}.color-carrot {color: #ffab52;}.color-amethyst {color: #9c55a5;}.color-scooter {color: #57cadd;}.color-dolly {color: #fff68d;}.color-shamrock {color: #2ab8ac;}.color-pear {color: #cce033;}.previews {;list-style: none;width: 85%;margin: 34px auto 0;}.previews li {display: inline-block;width: 150px;padding: 20px;vertical-align: middle;}.previews.bigs li {width: 250px;}.preview-item {font-family: 'Dancing Script', cursive;font-size: 70px;line-height: 100px;position: relative;width: 100px;height: 100px;border-radius: 15px;color: rgba(255, 255, 255, 0.3);margin: auto;}.preview-item.big {width: 200px;height: 200px;font-size: 160px;line-height: 200px;}.section.carrot .preview-item {background-color: #ffc485;}.section.amethyst .preview-item {background-color: #b075b8;}.section.scooter .preview-item {background-color: #81d7e6;}.section.dolly .preview-item {background-color: #fffac0;}.section.shamrock .preview-item {background-color: #41d4c7;}.section.pear .preview-item {background-color: #d7e75f;}.preview-item:after {content: "";width: 0;height: 0;border-left: 33px solid transparent;position: absolute;bottom: 0px;right: 0px;}.section.carrot .preview-item:after {border-bottom: 33px solid #ffab52;}.section.amethyst .preview-item:after {border-bottom: 33px solid #9c55a5;}.section.scooter .preview-item:after {border-bottom: 33px solid #57cadd;}.section.dolly .preview-item:after {border-bottom: 33px solid #fff68d;}.section.shamrock .preview-item:after {border-bottom: 33px solid #2ab8ac;}.section.pear .preview-item:after {border-bottom: 33px solid #cce033;}.flip {position: absolute;right: 0;bottom: 0;width: 0;height: 0;border-right: 30px solid transparent;}.section.carrot .flip {border-top: 30px solid #ffd09f;}.section.amethyst .flip {border-top: 30px solid #ba86c1;}.section.scooter .flip {border-top: 30px solid #97deea;}.section.dolly .flip {border-top: 30px solid #fffcda;}.section.shamrock .flip {border-top: 30px solid #56d8cd;}.section.pear .flip {border-top: 30px solid #ddea75;}.flip:after {content: "";width: 0;height: 0;border-bottom: 30px solid rgba(0, 0, 0, 0.15);border-left: 30px solid transparent;position: absolute;bottom: 0;left: -30px;}.preview-desc {margin-top: 20px;font-family: 'Gentium Basic', serif;}.dropdown {position: relative;margin: 25px auto;height: 50px;width: 300px;}.dropdown::after {content: "➘";position: absolute;right: 11px;top: 13px;color: rgba(0, 0, 0, 0.2);font-size: 25px;}.dropdown-select {position: relative;width: 100%;margin: 0;padding: 6px 8px 6px 10px;height: 50px;line-height: 25px;font-family: 'Dancing Script', cursive;font-size: 25px;color: rgba(0, 0, 0, 0.5);background-color: rgba(255, 255, 255, 0.1);transition: background-color .3s;border: none;outline: none;border: 0;border-radius: 0;-webkit-appearance: none;}.dropdown-select:hover, .dropdown-select:active {background-color: rgba(255, 255, 255, 0.5);}.dropdown-select > option {margin: 3px;padding: 6px 8px;text-shadow: none;border-radius: 3px;;}.btn {font-family: 'Dancing Script', cursive;font-size: 40px;padding: 10px 20px;margin-top: 34px;display: inline-block;transition: background-color, .3s;}.btn.carrot {background-color: #ffab52;}.btn.amethyst {background-color: #9c55a5;}.btn.light:hover {background-color: rgba(0, 0, 0, 0.1);}.btn + small {font-family: 'Gentium Basic', serif;font-size: 16px;margin-top: 10px;;}
관련자료
-
이전
-
다음
댓글 0
등록된 댓글이 없습니다.