Gadget divertido " El Monstruo Tragacursores"

Hoy les dejo uno de los mas bonitos Gadgets Divertidos para blogger que lo vi por internet.

Se trata de un Monstruo Tragacursores que esta realizado de un joven diseñador , para ver como funciona este gadget solo tiene que pasar el cursor sobre el, te lo come, se cambia de color y saca algunos sonidos.

#cont{ z-index: 11; position: absolute; top: 50%; left: 50%; -webkit-transition: -webkit-transform .3s cubic-bezier(.1, 0, 0, 1); -moz-transition: -moz-transform .3s cubic-bezier(.1, 0, 0, 1); -o-transition: -o-transform .3s cubic-bezier(.1, 0, 0, 1); transition: transform .3s cubic-bezier(.1, 0, 0, 1); } #cont:after { /* shadow */ content: ""; z-index: -1; position: absolute; width: 100px; height: 100px; margin-left: -50px; border-radius: 50px; -webkit-box-shadow: hsla(210, 0%, 0%, .8) 0 200px 100px 1px; -moz-box-shadow: hsla(210, 0%, 0%, .8) 0 200px 100px 1px; -o-box-shadow: hsla(210, 0%, 0%, .8) 0 200px 100px 1px; box-shadow: hsla(210, 0%, 0%, .8) 0 200px 100px 1px; -webkit-transform: translateY(-160px) scale(1.4, .5); -moz-transform: translate( -50px, -160px) scale(1.2, .5); -o-transform: translateY(-160px) scale(1.4, .5); transform: translateY(-160px) scale(1.4, .5); } #monster { z-index: 1; position: relative; width: 200px; height: 240px; margin: -120px 0 0 -100px; border-radius: 100px 100px 50px 50px / 160px 160px 80px 80px; text-align: center; background-color: #5e97ed; background-image: -webkit-gradient(radial, 50% 8%, 0, 50% 40%, 120, color-stop( 0, rgba(255, 255, 255, .8) ), color-stop(.8, rgba(255, 255, 255, 0) ), color-stop(.8, rgba(0, 0, 0, 0) ), color-stop( 1, rgba(0, 0, 0, .33) )), url(noise.png); background-image: -moz-radial-gradient(50% 21% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100% ), url(noise.png); background-image: -o-radial-gradient(50% 21% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100% ), url(noise.png); background-image: radial-gradient(50% 21% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100% ), url(noise.png); -webkit-box-shadow: inset rgba(0, 0, 0, .5) 0 -10px 50px; -moz-box-shadow: inset rgba(0, 0, 0, .5) 0 -10px 50px; -o-box-shadow: inset rgba(0, 0, 0, .5) 0 -10px 50px; box-shadow: inset rgba(0, 0, 0, .5) 0 -10px 50px; -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -o-transform-origin: bottom; transform-origin: bottom; -webkit-box-reflect: below -3px -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, color-stop(0.6, rgba(0, 0, 0, .2) ), to( transparent )); -webkit-transform: scale3d(1, 1, 1); /* fixes the reflection after scaling */ -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; } /* ---------------------------- ojos ---------------------------- */ #monster .eye:first-child { -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } .eye { position: relative; width: 60px; height: 40px; margin: 0px auto 5px auto; top: 15%; border-radius: 60px / 40px; background-color: #eee; -webkit-box-shadow: inset rgba(0, 0, 0, .4) 0 -1px 3px 1px, inset rgba(0, 0, 0, .5) 0 -5px 20px, rgba(0, 0, 0, .5) 0 -5px 10px, rgba(255, 255, 255, .5) 0 5px 10px; -moz-box-shadow: inset rgba(0, 0, 0, .4) 0 -1px 3px 1px, inset rgba(0, 0, 0, .5) 0 -5px 20px, rgba(0, 0, 0, .5) 0 -5px 10px, rgba(255, 255, 255, .5) 0 5px 10px; -o-box-shadow: inset rgba(0, 0, 0, .4) 0 -1px 3px 1px, inset rgba(0, 0, 0, .5) 0 -5px 20px, rgba(0, 0, 0, .5) 0 -5px 10px, rgba(255, 255, 255, .5) 0 5px 10px; box-shadow: inset rgba(0, 0, 0, .4) 0 -1px 3px 1px, inset rgba(0, 0, 0, .5) 0 -5px 20px, rgba(0, 0, 0, .5) 0 -5px 10px, rgba(255, 255, 255, .5) 0 5px 10px; background-repeat: no-repeat; background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 40, color-stop(.12, rgba(0, 0, 0, 1) ), color-stop(.22, hsl(190, 50%, 50%) ), color-stop(.4, hsl(200, 50%, 30%) ), color-stop(.5, rgba(255, 255, 255, 0) ) ); background-image: -moz-radial-gradient(50% 50% 0deg, circle, rgba(0, 0, 0, 1) 12%, hsl(190, 50%, 50%) 22%, hsl(200, 50%, 30%) 40%, rgba(255, 255, 255, 0) 50% ); background-image: -o-radial-gradient(50% 50% 0deg, circle, rgba(0, 0, 0, 1) 12%, hsl(190, 50%, 50%) 22%, hsl(200, 50%, 30%) 40%, rgba(255, 255, 255, 0) 50% ); background-image: radial-gradient(50% 50% 0deg, circle, rgba(0, 0, 0, 1) 12%, hsl(190, 50%, 50%) 22%, hsl(200, 50%, 30%) 40%, rgba(255, 255, 255, 0) 50% ); } .eye:before { /* highlight */ content: ""; position: absolute; top: 20%; left: 32%; border-radius: 5px; width: 10px; height: 10px; background-color: #fff; -webkit-transform: skewX(-10deg); -moz-transform: skewX(-10deg); -o-transform: skewX(-10deg); transform: skewX(-10deg); } .eye .lid { position: absolute; border-radius: inherit; width: inherit; height: inherit; background-color: rgba(94, 151, 237, 0.8); -webkit-box-shadow: inset rgba(0, 0, 0, .2) 0 -1px 3px 1px, inset rgba(0, 0, 0, .5) 0 -5px 20px, rgba(0, 0, 0, .6) 0 1px 2px; background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 30%, 40, color-stop( 0, rgba(255, 255, 255, .8) ), color-stop(.8, rgba(255, 255, 255, 0) ), color-stop(.8, rgba(0, 0, 0, 0) ), color-stop( 1, rgba(0, 0, 0, .33) )), url(noise.png); background-image: -moz-radial-gradient(50% 20% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100% ), url(noise.png); background-image: -o-radial-gradient(50% 20% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100% ), url(noise.png); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0px 0px; -webkit-mask-image: -webkit-gradient(radial, 50% 120%, 20, 50% 120%, 50, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.6, rgba(0, 0, 0, 1)) ); -webkit-transform: translate3d(0, 0, 0); /* fixes a render bug */ } /* ---------------------------- boca ---------------------------- */ #mouth { position: relative; width: 100px; height: 20px; margin: 0 auto; top: 25%; overflow: hidden; border-radius: 100px 100px 50px 50px / 60px 60px 80px 80px; background-color: #111; -webkit-box-shadow: inset rgba(0, 0, 0, .7) 0 -2px 10px 1px, rgba(0, 0, 0, .7) 0 -5px 10px, rgba(255, 255, 255, .7) 0 5px 10px; -moz-box-shadow: inset rgba(0, 0, 0, .7) 0 -2px 10px 1px, rgba(0, 0, 0, .7) 0 -5px 10px, rgba(255, 255, 255, .7) 0 5px 10px; -o-box-shadow: inset rgba(0, 0, 0, .7) 0 -2px 10px 1px, rgba(0, 0, 0, .7) 0 -5px 10px, rgba(255, 255, 255, .7) 0 5px 10px; box-shadow: inset rgba(0, 0, 0, .7) 0 -2px 10px 1px, rgba(0, 0, 0, .7) 0 -5px 10px, rgba(255, 255, 255, .7) 0 5px 10px; /* tongue */ background-repeat: no-repeat; background-position: center 85%; -webkit-background-size: 100px; -moz-background-size: 100px; -o-background-size: 100px; background-size: 100px; background-image: -webkit-gradient(radial, 62% 100%, 0, 62% 100%, 50, color-stop(.3, rgba(255, 0, 0, 1) ), color-stop(.5, rgba(255, 0, 0, 0) )), -webkit-gradient(radial, 38% 100%, 0, 38% 100%, 50, color-stop(.3, rgba(255, 0, 0, 1) ), color-stop(.5, rgba(255, 0, 0, 0) )); background-image: -moz-radial-gradient(62% 100% 0deg, rgba(255, 0, 0, 1) 10%, rgba(255, 0, 0, 0) 30% ), -moz-radial-gradient(38% 100% 0deg, rgba(255, 0, 0, 1) 10%, rgba(255, 0, 0, 0) 30% ); background-image: -o-radial-gradient(62% 100% 0deg, rgba(255, 0, 0, 1) 10%, rgba(255, 0, 0, 0) 30% ), -o-radial-gradient(38% 100% 0deg, rgba(255, 0, 0, 1) 10%, rgba(255, 0, 0, 0) 30% ); } #mouth:before { /* teeth */ content: ""; position: absolute; top: 0; left: 0; right: 0; width: 30px; height: 10px; margin: 0 auto; border-radius: 0px 0px 4px 4px; background-color: #fff9e4; -webkit-background-size: 50%; -moz-background-size: 50%; -o-background-size: 50%; background-size: 50%; background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0, rgba(0, 0, 0, .4) ), color-stop(.1, rgba(0, 0, 0, 0) ), color-stop(.9, rgba(0, 0, 0, 0) ), color-stop(1, rgba(0, 0, 0, .4) ) ); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, .4) 100% ); background-image: -o-linear-gradient(left, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, .4) 100% ); background-image: linear-gradient(left, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, .4) 100% ); -webkit-box-shadow: inset rgba(0, 0, 0, .8) 0 2px 5px 1px; -moz-box-shadow: inset rgba(0, 0, 0, .8) 0 2px 5px 1px; -o-box-shadow: inset rgba(0, 0, 0, .8) 0 2px 5px 1px; box-shadow: inset rgba(0, 0, 0, .8) 0 2px 5px 1px; -webkit-transform: perspective(50) translate3d(0, 0, 5px) rotateX(-40deg) ; } /* ---------------------------- states ---------------------------- */ /* sleep */ .sleep .eye { background-position: 0 -40px; } .sleep .lid { -webkit-mask-image: -webkit-gradient(radial, 50% 200%, 20, 50% 200%, 50, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.6, rgba(0, 0, 0, 1)) ); } .sleep #mouth { height: 50px; background-position: center bottom; -webkit-animation: sleep-mouth 2.5s 0 infinite alternate cubic-bezier(.3, 0, .5, 1); } .sleep #monster { -webkit-animation: sleep-monster 2.5s 0 infinite alternate cubic-bezier(.5, 0, .3, 1); } /* hungry */ .hungry #mouth.out { -webkit-transition: height .4s cubic-bezier(0, 0.6, 0.2, 1); -moz-transition: height .4s cubic-bezier(0, 0.6, 0.2, 1); } .hungry .lid { -moz-transform: scaleY(0); /* hide for browsers without mask-image */ -o-transform: scaleY(0); /* hide for browsers without mask-image */ } .hungry #monster { -webkit-animation: hungry-monster .3s 0 1 cubic-bezier(.4, .1, .2, 1); -moz-animation: hungry-monster .3s 1 cubic-bezier(.4, .1, .2, 1); } /* eat */ .eat #monster { background-color: #f932a5; -webkit-animation: eat-swallow-monster .3s 0 1 cubic-bezier(.4, .1, .2, 1), eat-monster .6s .3s infinite alternate cubic-bezier(.5, .1, .5, .9); -moz-animation: eat-swallow-monster .3s 1 cubic-bezier(.4, .1, .2, 1), eat-monster .6s .4s infinite alternate cubic-bezier(.5, .1, .5, .9); } .eat .eye:first-child { -webkit-animation: eat-eye-first .6s 0 infinite cubic-bezier(0, .6, 1, .4); -moz-animation: eat-eye-first .6s infinite cubic-bezier(0, .6, 1, .4); } .eat .eye:nth-child(2) { -webkit-animation: eat-eye-second .6s 0 infinite cubic-bezier(0, .6, 1, .4); -moz-animation: eat-eye-second .6s infinite cubic-bezier(0, .6, 1, .4); } .eat .lid { display: none; } .eat #mouth { height: 2px; border-radius: 0px 0px 500px 500px / 0px 0px 60px 60px; -webkit-box-shadow: inset rgba(0, 0, 0, .7) 0 -2px 10px 1px, rgba(0, 0, 0, .7) 0 -2px 10px 2px, rgba(255, 255, 255, .7) 0 2px 6px 2px; background-position: center 0px; -webkit-animation: eat-mouth .2s 0 infinite alternate cubic-bezier(.5, .1, .5, .9); -moz-animation: eat-mouth .2s infinite alternate cubic-bezier(.5, .1, .5, .9); } .eat #mouth:before { display: none; } #wrapper.eat { -webkit-transform: scale3d(1.08, 1.08, 1); -moz-transform: scale(1.08, 1.08); -o-transform: scale(1.08, 1.08); transform: scale(1.08, 1.08); -webkit-transition: -webkit-transform .1s cubic-bezier(.1, .3, 0, 1); -moz-transition: -moz-transform .1s cubic-bezier(.1, .3, 0, 1); -o-transition: -o-transform .1s cubic-bezier(.1, .3, 0, 1); transition: transform .1s cubic-bezier(.1, .3, 0, 1); } /* ---------------------------- animation webkit ---------------------------- */ /* sleep */ @-webkit-keyframes sleep-mouth { 0% {} 100% { -webkit-transform: scale3d(1.04, 1.05, 1); } } @-webkit-keyframes sleep-monster { 0% {} 100% { -webkit-transform: scale3d(1.08, .92, 1); } } /* hungry */ @-webkit-keyframes hungry-monster { 0% {} 20% { -webkit-transform: scale3d(.8, 1.1, 1); } 100% { -webkit-transform: scale3d( 1, 1, 1); } } /* eat */ @-webkit-keyframes eat-swallow-monster { 0% {} 20% { -webkit-transform: scale3d(1.2, .9, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @-webkit-keyframes eat-monster { 0% {} 100% { -webkit-transform: scale3d(1.02, .98, 1); } } @-webkit-keyframes eat-mouth { 0% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(15px) scale3d(0.9, 1.2, 1); } } @-webkit-keyframes eat-eye-first { 0% { background-position: 0 -60px; -webkit-transform: scale3d(.6, .6, 1) translate3d(0, -5px, 0); } 100% { background-position: 0 60px; -webkit-transform: scale3d(.8, .8, 1) translate3d(0, 5px, 0); } } @-webkit-keyframes eat-eye-second { 0% { background-position: 0 60px; -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } 100% { background-position: 0 -60px; -webkit-transform: scale3d(.8, .8, 1) translate3d(0, 0, 0); } } /* ---------------------------- animation moz ---------------------------- */ /* hungry */ @-moz-keyframes hungry-monster { 0% {} 20% { -moz-transform: scale(.8, 1.1); } 100% { -moz-transform: scale( 1, 1); } } /* eat */ @-moz-keyframes eat-swallow-monster { 0% {} 20% { -moz-transform: scale(1.2, .9); } 100% { -moz-transform: scale(1, 1); } } @-moz-keyframes eat-monster { 0% {} 100% { -moz-transform: scale(1.02, .98); } } @-moz-keyframes eat-mouth { 0% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(15px) scale(0.9, 1.2); } } @-moz-keyframes eat-eye-first { 0% { background-position: 0 -60px; -moz-transform: scale(.6, .6) translate(0, -5px); } 100% { background-position: 0 60px; -moz-transform: scale(.8, .8) translate(0, 5px); } } @-moz-keyframes eat-eye-second { 0% { background-position: 0 60px; -moz-transform: scale(1, 1); } 100% { background-position: 0 -60px; -moz-transform: scale(.8, .8); } } Para añadir este Gadget Divertido en tu blog, solo tiene que copiar el codigo que esta debajo del gadget y pegarlo en tu blog en Diseño - Agregar un Gadget :

#cont{ z-index: 11; position: absolute; top: 50%; left: 50%; -webkit-transition: -webkit-transform .3s cubic-bezier(.1, 0, 0, 1); -moz-transition: -moz-transform .3s cubic-bezier(.1, 0, 0, 1); -o-transition: -o-transform .3s cubic-bezier(.1, 0, 0, 1); transition: transform .3s cubic-bezier(.1, 0, 0, 1); } #cont:after { /* shadow */ content: ""; z-index: -1; position: absolute; width: 100px; height: 100px; margin-left: -50px; border-radius: 50px; -webkit-box-shadow: hsla(210, 0%, 0%, .8) 0 200px 100px 1px; -moz-box-shadow: hsla(210, 0%, 0%, .8) 0 200px 100px 1px; -o-box-shadow: hsla(210, 0%, 0%, .8) 0 200px 100px 1px; box-shadow: hsla(210, 0%, 0%, .8) 0 200px 100px 1px; -webkit-transform: translateY(-160px) scale(1.4, .5); -moz-transform: translate( -50px, -160px) scale(1.2, .5); -o-transform: translateY(-160px) scale(1.4, .5); transform: translateY(-160px) scale(1.4, .5); } #monster { z-index: 1; position: relative; width: 200px; height: 240px; margin: -120px 0 0 -100px; border-radius: 100px 100px 50px 50px / 160px 160px 80px 80px; text-align: center; background-color: #5e97ed; background-image: -webkit-gradient(radial, 50% 8%, 0, 50% 40%, 120, color-stop( 0, rgba(255, 255, 255, .8) ), color-stop(.8, rgba(255, 255, 255, 0) ), color-stop(.8, rgba(0, 0, 0, 0) ), color-stop( 1, rgba(0, 0, 0, .33) )), url(noise.png); background-image: -moz-radial-gradient(50% 21% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100% ), url(noise.png); background-image: -o-radial-gradient(50% 21% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100% ), url(noise.png); background-image: radial-gradient(50% 21% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100% ), url(noise.png); -webkit-box-shadow: inset rgba(0, 0, 0, .5) 0 -10px 50px; -moz-box-shadow: inset rgba(0, 0, 0, .5) 0 -10px 50px; -o-box-shadow: inset rgba(0, 0, 0, .5) 0 -10px 50px; box-shadow: inset rgba(0, 0, 0, .5) 0 -10px 50px; -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -o-transform-origin: bottom; transform-origin: bottom; -webkit-box-reflect: below -3px -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, color-stop(0.6, rgba(0, 0, 0, .2) ), to( transparent )); -webkit-transform: scale3d(1, 1, 1); /* fixes the reflection after scaling */ -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; } /* ---------------------------- ojos ---------------------------- */ #monster .eye:first-child { -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } .eye { position: relative; width: 60px; height: 40px; margin: 0px auto 5px auto; top: 15%; border-radius: 60px / 40px; background-color: #eee; -webkit-box-shadow: inset rgba(0, 0, 0, .4) 0 -1px 3px 1px, inset rgba(0, 0, 0, .5) 0 -5px 20px, rgba(0, 0, 0, .5) 0 -5px 10px, rgba(255, 255, 255, .5) 0 5px 10px; -moz-box-shadow: inset rgba(0, 0, 0, .4) 0 -1px 3px 1px, inset rgba(0, 0, 0, .5) 0 -5px 20px, rgba(0, 0, 0, .5) 0 -5px 10px, rgba(255, 255, 255, .5) 0 5px 10px; -o-box-shadow: inset rgba(0, 0, 0, .4) 0 -1px 3px 1px, inset rgba(0, 0, 0, .5) 0 -5px 20px, rgba(0, 0, 0, .5) 0 -5px 10px, rgba(255, 255, 255, .5) 0 5px 10px; box-shadow: inset rgba(0, 0, 0, .4) 0 -1px 3px 1px, inset rgba(0, 0, 0, .5) 0 -5px 20px, rgba(0, 0, 0, .5) 0 -5px 10px, rgba(255, 255, 255, .5) 0 5px 10px; background-repeat: no-repeat; background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 40, color-stop(.12, rgba(0, 0, 0, 1) ), color-stop(.22, hsl(190, 50%, 50%) ), color-stop(.4, hsl(200, 50%, 30%) ), color-stop(.5, rgba(255, 255, 255, 0) ) ); background-image: -moz-radial-gradient(50% 50% 0deg, circle, rgba(0, 0, 0, 1) 12%, hsl(190, 50%, 50%) 22%, hsl(200, 50%, 30%) 40%, rgba(255, 255, 255, 0) 50% ); background-image: -o-radial-gradient(50% 50% 0deg, circle, rgba(0, 0, 0, 1) 12%, hsl(190, 50%, 50%) 22%, hsl(200, 50%, 30%) 40%, rgba(255, 255, 255, 0) 50% ); background-image: radial-gradient(50% 50% 0deg, circle, rgba(0, 0, 0, 1) 12%, hsl(190, 50%, 50%) 22%, hsl(200, 50%, 30%) 40%, rgba(255, 255, 255, 0) 50% ); } .eye:before { /* highlight */ content: ""; position: absolute; top: 20%; left: 32%; border-radius: 5px; width: 10px; height: 10px; background-color: #fff; -webkit-transform: skewX(-10deg); -moz-transform: skewX(-10deg); -o-transform: skewX(-10deg); transform: skewX(-10deg); } .eye .lid { position: absolute; border-radius: inherit; width: inherit; height: inherit; background-color: rgba(94, 151, 237, 0.8); -webkit-box-shadow: inset rgba(0, 0, 0, .2) 0 -1px 3px 1px, inset rgba(0, 0, 0, .5) 0 -5px 20px, rgba(0, 0, 0, .6) 0 1px 2px; background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 30%, 40, color-stop( 0, rgba(255, 255, 255, .8) ), color-stop(.8, rgba(255, 255, 255, 0) ), color-stop(.8, rgba(0, 0, 0, 0) ), color-stop( 1, rgba(0, 0, 0, .33) )), url(noise.png); background-image: -moz-radial-gradient(50% 20% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100% ), url(noise.png); background-image: -o-radial-gradient(50% 20% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100% ), url(noise.png); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0px 0px; -webkit-mask-image: -webkit-gradient(radial, 50% 120%, 20, 50% 120%, 50, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.6, rgba(0, 0, 0, 1)) ); -webkit-transform: translate3d(0, 0, 0); /* fixes a render bug */ } /* ---------------------------- boca ---------------------------- */ #mouth { position: relative; width: 100px; height: 20px; margin: 0 auto; top: 25%; overflow: hidden; border-radius: 100px 100px 50px 50px / 60px 60px 80px 80px; background-color: #111; -webkit-box-shadow: inset rgba(0, 0, 0, .7) 0 -2px 10px 1px, rgba(0, 0, 0, .7) 0 -5px 10px, rgba(255, 255, 255, .7) 0 5px 10px; -moz-box-shadow: inset rgba(0, 0, 0, .7) 0 -2px 10px 1px, rgba(0, 0, 0, .7) 0 -5px 10px, rgba(255, 255, 255, .7) 0 5px 10px; -o-box-shadow: inset rgba(0, 0, 0, .7) 0 -2px 10px 1px, rgba(0, 0, 0, .7) 0 -5px 10px, rgba(255, 255, 255, .7) 0 5px 10px; box-shadow: inset rgba(0, 0, 0, .7) 0 -2px 10px 1px, rgba(0, 0, 0, .7) 0 -5px 10px, rgba(255, 255, 255, .7) 0 5px 10px; /* tongue */ background-repeat: no-repeat; background-position: center 85%; -webkit-background-size: 100px; -moz-background-size: 100px; -o-background-size: 100px; background-size: 100px; background-image: -webkit-gradient(radial, 62% 100%, 0, 62% 100%, 50, color-stop(.3, rgba(255, 0, 0, 1) ), color-stop(.5, rgba(255, 0, 0, 0) )), -webkit-gradient(radial, 38% 100%, 0, 38% 100%, 50, color-stop(.3, rgba(255, 0, 0, 1) ), color-stop(.5, rgba(255, 0, 0, 0) )); background-image: -moz-radial-gradient(62% 100% 0deg, rgba(255, 0, 0, 1) 10%, rgba(255, 0, 0, 0) 30% ), -moz-radial-gradient(38% 100% 0deg, rgba(255, 0, 0, 1) 10%, rgba(255, 0, 0, 0) 30% ); background-image: -o-radial-gradient(62% 100% 0deg, rgba(255, 0, 0, 1) 10%, rgba(255, 0, 0, 0) 30% ), -o-radial-gradient(38% 100% 0deg, rgba(255, 0, 0, 1) 10%, rgba(255, 0, 0, 0) 30% ); } #mouth:before { /* teeth */ content: ""; position: absolute; top: 0; left: 0; right: 0; width: 30px; height: 10px; margin: 0 auto; border-radius: 0px 0px 4px 4px; background-color: #fff9e4; -webkit-background-size: 50%; -moz-background-size: 50%; -o-background-size: 50%; background-size: 50%; background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0, rgba(0, 0, 0, .4) ), color-stop(.1, rgba(0, 0, 0, 0) ), color-stop(.9, rgba(0, 0, 0, 0) ), color-stop(1, rgba(0, 0, 0, .4) ) ); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, .4) 100% ); background-image: -o-linear-gradient(left, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, .4) 100% ); background-image: linear-gradient(left, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, .4) 100% ); -webkit-box-shadow: inset rgba(0, 0, 0, .8) 0 2px 5px 1px; -moz-box-shadow: inset rgba(0, 0, 0, .8) 0 2px 5px 1px; -o-box-shadow: inset rgba(0, 0, 0, .8) 0 2px 5px 1px; box-shadow: inset rgba(0, 0, 0, .8) 0 2px 5px 1px; -webkit-transform: perspective(50) translate3d(0, 0, 5px) rotateX(-40deg) ; } /* ---------------------------- states ---------------------------- */ /* sleep */ .sleep .eye { background-position: 0 -40px; } .sleep .lid { -webkit-mask-image: -webkit-gradient(radial, 50% 200%, 20, 50% 200%, 50, color-stop(.5, rgba(0, 0, 0, 0)), color-stop(.6, rgba(0, 0, 0, 1)) ); } .sleep #mouth { height: 50px; background-position: center bottom; -webkit-animation: sleep-mouth 2.5s 0 infinite alternate cubic-bezier(.3, 0, .5, 1); } .sleep #monster { -webkit-animation: sleep-monster 2.5s 0 infinite alternate cubic-bezier(.5, 0, .3, 1); } /* hungry */ .hungry #mouth.out { -webkit-transition: height .4s cubic-bezier(0, 0.6, 0.2, 1); -moz-transition: height .4s cubic-bezier(0, 0.6, 0.2, 1); } .hungry .lid { -moz-transform: scaleY(0); /* hide for browsers without mask-image */ -o-transform: scaleY(0); /* hide for browsers without mask-image */ } .hungry #monster { -webkit-animation: hungry-monster .3s 0 1 cubic-bezier(.4, .1, .2, 1); -moz-animation: hungry-monster .3s 1 cubic-bezier(.4, .1, .2, 1); } /* eat */ .eat #monster { background-color: #f932a5; -webkit-animation: eat-swallow-monster .3s 0 1 cubic-bezier(.4, .1, .2, 1), eat-monster .6s .3s infinite alternate cubic-bezier(.5, .1, .5, .9); -moz-animation: eat-swallow-monster .3s 1 cubic-bezier(.4, .1, .2, 1), eat-monster .6s .4s infinite alternate cubic-bezier(.5, .1, .5, .9); } .eat .eye:first-child { -webkit-animation: eat-eye-first .6s 0 infinite cubic-bezier(0, .6, 1, .4); -moz-animation: eat-eye-first .6s infinite cubic-bezier(0, .6, 1, .4); } .eat .eye:nth-child(2) { -webkit-animation: eat-eye-second .6s 0 infinite cubic-bezier(0, .6, 1, .4); -moz-animation: eat-eye-second .6s infinite cubic-bezier(0, .6, 1, .4); } .eat .lid { display: none; } .eat #mouth { height: 2px; border-radius: 0px 0px 500px 500px / 0px 0px 60px 60px; -webkit-box-shadow: inset rgba(0, 0, 0, .7) 0 -2px 10px 1px, rgba(0, 0, 0, .7) 0 -2px 10px 2px, rgba(255, 255, 255, .7) 0 2px 6px 2px; background-position: center 0px; -webkit-animation: eat-mouth .2s 0 infinite alternate cubic-bezier(.5, .1, .5, .9); -moz-animation: eat-mouth .2s infinite alternate cubic-bezier(.5, .1, .5, .9); } .eat #mouth:before { display: none; } #wrapper.eat { -webkit-transform: scale3d(1.08, 1.08, 1); -moz-transform: scale(1.08, 1.08); -o-transform: scale(1.08, 1.08); transform: scale(1.08, 1.08); -webkit-transition: -webkit-transform .1s cubic-bezier(.1, .3, 0, 1); -moz-transition: -moz-transform .1s cubic-bezier(.1, .3, 0, 1); -o-transition: -o-transform .1s cubic-bezier(.1, .3, 0, 1); transition: transform .1s cubic-bezier(.1, .3, 0, 1); } /* ---------------------------- animation webkit ---------------------------- */ /* sleep */ @-webkit-keyframes sleep-mouth { 0% {} 100% { -webkit-transform: scale3d(1.04, 1.05, 1); } } @-webkit-keyframes sleep-monster { 0% {} 100% { -webkit-transform: scale3d(1.08, .92, 1); } } /* hungry */ @-webkit-keyframes hungry-monster { 0% {} 20% { -webkit-transform: scale3d(.8, 1.1, 1); } 100% { -webkit-transform: scale3d( 1, 1, 1); } } /* eat */ @-webkit-keyframes eat-swallow-monster { 0% {} 20% { -webkit-transform: scale3d(1.2, .9, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @-webkit-keyframes eat-monster { 0% {} 100% { -webkit-transform: scale3d(1.02, .98, 1); } } @-webkit-keyframes eat-mouth { 0% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(15px) scale3d(0.9, 1.2, 1); } } @-webkit-keyframes eat-eye-first { 0% { background-position: 0 -60px; -webkit-transform: scale3d(.6, .6, 1) translate3d(0, -5px, 0); } 100% { background-position: 0 60px; -webkit-transform: scale3d(.8, .8, 1) translate3d(0, 5px, 0); } } @-webkit-keyframes eat-eye-second { 0% { background-position: 0 60px; -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } 100% { background-position: 0 -60px; -webkit-transform: scale3d(.8, .8, 1) translate3d(0, 0, 0); } } /* ---------------------------- animation moz ---------------------------- */ /* hungry */ @-moz-keyframes hungry-monster { 0% {} 20% { -moz-transform: scale(.8, 1.1); } 100% { -moz-transform: scale( 1, 1); } } /* eat */ @-moz-keyframes eat-swallow-monster { 0% {} 20% { -moz-transform: scale(1.2, .9); } 100% { -moz-transform: scale(1, 1); } } @-moz-keyframes eat-monster { 0% {} 100% { -moz-transform: scale(1.02, .98); } } @-moz-keyframes eat-mouth { 0% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(15px) scale(0.9, 1.2); } } @-moz-keyframes eat-eye-first { 0% { background-position: 0 -60px; -moz-transform: scale(.6, .6) translate(0, -5px); } 100% { background-position: 0 60px; -moz-transform: scale(.8, .8) translate(0, 5px); } } @-moz-keyframes eat-eye-second { 0% { background-position: 0 60px; -moz-transform: scale(1, 1); } 100% { background-position: 0 -60px; -moz-transform: scale(.8, .8); } }

Si te ha gustado este Monstruo Tragacursores y si quieres seguir a mejorar y decorar tu blog, suscribete gratis al boletin de noticias de GadgetsBlogger.com para recibir todas las nuevas publicaciones por correo electronico o añade nuestro feed RSS . .