Invierte en tu educación con el precio especial
Antes:$249
Paga en 4 cuotas sin intereses
Termina en:
10d
20h
55m
44s
MUESTRA DE TODO EL CÓDIGO:
Comenzamos por el HTML:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>EYES👀</title><linkrel="stylesheet"href="style.css"></head><body><divclass="face"><divclass="eyes"><divclass="eye"></div><divclass="eye"></div></div></div><scriptsrc="script.js"></script></body></html>Como ves tengo un “div” con la clase face este servirá para el rostro del emoji.
Dentro de ese, tenemos el elemento “div” con la clase_eyes_ y este servirá como contenedor para los ojos.
Finalmente tenemos dos elementos “div” con la clase_eye_ que serán los ojos en si mismos.
**Vayamos por el CSS: **
/*Ese asterisco como ya sabras es el selector universal y aqui no esta permitiendo realizar un reinicio de estilo y quitar todo margen predeterminado por el navegador, ya que podría afectar nuestro diseño*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/*Al body le decimos que todos sus hijos directos se mostraran como flex, además los centramos respecto al tamaño total de la pantalla. Finalmente le ponemos un color de fondo oscuro*/body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #3c403f;
}
/*Ahora pasamos al elemento con la clase "face", este será el rostro de nuestro emoji, yo decidí colocarle un rostro de color morado. Fíjate que le doy un position como relative y esto me sirve para que los elementos en su interior que yo decida poner como absolute tenga como espacio de movimiento solo a este elemento.
Le ponemos un ancho y un alto de 300 pixeles.
Y como será una especie de rostro de emoji y estos son redonditos le ponemos un border-radius de 50%.
Luego le decimos que todos sus hijos inmediatos se mostraran en flex.
Y volvemos a centrar tanto horizontal como verticalmente*/.face{
background-color: #ad47f6;
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/*Fijate que en el HTML no pusimos un div para la boca, pero el emoji que te mostre al inicio si tiene una.
Para tener esa boca usaremos el pseudoelemento before que nos permite agregar contenido antes del div face.
Le establecemos un tamaño.
Y le damos una posicion de absolute que permite que este elemento lo podamos mover con referencia al div face (recuerda por eso le pusimos relative) y se quede fijo allí. Ese top es para dar ese movimiento.
Ese transition es para que la animation que pondremos en el hover tome un tiempo y se vea más natural*/.face::before{
content: "";
background: #ebe0ca;
width: 150px;
height: 70px;
position: absolute;
top: 180px;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
transition: 0.5s;
}
/*Aqui aplicamos lo que te decia del hover, aqui queremos que la boca cambie de forma si el mouse esta encima del div*/.face:hover::before{
top: 210px;
background: #ebe0ca;
height: 20px;
border-radius: 70px70px10px10px;
}
/*Aqui hacemos que el contenedor de los ojos, el div eyes, tenga una posicion relative y le decimos todos tus hijos inmediatos se mostraran flex.*/.eyes{
position: relative;
top: -40px;
display: flex;
}
/*
Aqui aplicamos estilos a los div eye que son los ojos en si mismo (la parte blanquita del ojo).
Le damos un color blanco, un ancho y un alto, una posicion relative y como debe ser redondo un border radius de 50% y un margin vertical de 15px
*/.eyes.eye{
background: #fff;
width: 80px;
height: 80px;
position: relative;
border-radius: 50%;
margin: 015px;
}
/* Y este código es solo para el iris del ojo (la parte negrita de nuestro ojo -salvo si eres ojiazul u otro color- 👁️) */.eyes.eye::before{
content: "";
background: #333;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
border-radius: 50%;
left: 25px;
transform: translate(-50%,-50%);
}
Ahora pasemos al JS:
document.querySelector("body").addEventListener('mousemove',eyeball);
functioneyeball(event){
let eye = document.querySelectorAll(".eye");
eye.forEach(function(eye){
//El método getBoundingClienteRect retorna el left, top, right//bottom, x (left), y(top), width y height del//rectangulo más pequeño que contiene por completo al elemento//Get the coordenate of the center of the eyelet x = eye.getBoundingClientRect().left + eye.clientWidth/2;
let y = eye.getBoundingClientRect().top + eye.clientHeight/2;
//Calculamos el ángulo (en radianes) entre el ratón y el centro del ojo.//event.pageX y event.pageY representan la coordenada del raton//La funcion Math.atan2(y,x) devuelve el angulo cuya tangente es el //cociente y/xlet radian = Math.atan2(event.pageX - x, event.pageY - y);
// Conviertimos el ángulo de radianes a grados y ajustamos la rotación//Ese -1 es para invertir la direccion de rotacion esto es para que la rotacion siga el movimiento del raton de manera coherente con la posicion del ojo//Ese +270 es un ajuste adicional para asegurar que los ojos esten la posicion adecuada y esto se hizo por la orientacion que tienen los ojoslet rot = radian*(180/Math.PI)*-1+270;
eye.style.transform = "rotate("+rot+"deg)";
}
);
}
Espero te sirva, la verdad que lo hice apurado porque me gana la hora 😐😐. Y necesito hacer mi tarea de la U, pero no quería irme sin antes hacer este reto. Si tienes alguna duda, no dudes 🤣🤣🤣 en escribirme.
