Muy original este monstruito que al pasar el cursor del raton sobre el, este lo sigue con la mirada hasta que se lo traga literalmente. Esta genial creacion, realizada por un joven diseñador web llamado Simurai, esta confeccionado con Javascript y CSS3. El monstruo azul esta integramente realizado con CSS, es decir, no contiene ningun tipo de imagen.
Si quereis ver el codigo empleado para su realizacion, haced click sobre el boton:
ver/ocultar codigo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://hostredeando.ucoz.es/SCRIPTS/monster/engin.js"></script>
<div id="cont" class="sleep"><center><div id="monster"><div class="eye">
<div class="lid"></div></div><div class="eye"><div class="lid"></div></div><div id="mouth"></div></div></center></div>
<style>
#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); }
}
</style>
