No nos damos cuenta del potencial de CSS3 hasta que construimos animaciones que parece obligatorio el uso de Javascript. Una de las herramientas que más adorodo, dentro de los estilos, son los selectores hermanos (~ y +). Jugando con ellos podemos hacer una valoración de estrellas animado usando las propiedades nativas. Declarando transform y transition podemos dar vida a casi cualquier elemento de manera sencilla sin pasar por realizar animations.
Demo (pasa el ratón por encima)
HTML
Primero declaramos nuestro HTML. En este caso un simple div con botones. En lugar de usar imágenes he querido hacer uso de fontawesome con su icono de estrella (<i class="fas fa-star"></i>).
<div class="valoracion">
<!-- Estrella 1 -->
<button>
<i class="fas fa-star"></i>
</button>
<!-- Estrella 2 -->
<button>
<i class="fas fa-star"></i>
</button>
<!-- Estrella 3 -->
<button>
<i class="fas fa-star"></i>
</button>
<!-- Estrella 4 -->
<button>
<i class="fas fa-star"></i>
</button>
<!-- Estrella 5 -->
<button>
<i class="fas fa-star"></i>
</button>
</div>
CSS
Para que sea más sencillo cambiar los colores, he declarado las variables en :root. Pero el truco radica justo debajo. Los elementos hermanos (~) solo funcionan con etiquetas que estén por delante, pero… si te fijas en la demo… se deben colorear los elementos que están detrás. Por suerte flexpermite cambiar el orden de los elementos con flex-direction. Ahora solo queda dar el color a todos los hermanos siguientes cuando el cursor se encuentre encima de un botón (hover).
:root {
--color-inactivo: #5f5050;
--color-hover: #ffa400;
}
.valoracion {
display: flex;
flex-direction: row-reverse;
}
.valoracion button {
background-color: initial;
border: 0;
color: var(--color-inactivo);
transition: 1s all;
}
.valoracion button:hover {
cursor: pointer;
color: var(--color-hover);
transform: rotate(360deg);
}
button:nth-child(1):hover ~ button {
color: var(--color-hover);
transform: rotate(360deg);
}
button:nth-child(2):hover ~ button {
color: var(--color-hover);
transform: rotate(360deg);
}
button:nth-child(3):hover ~ button {
color: var(--color-hover);
transform: rotate(360deg);
}
button:nth-child(4):hover ~ button {
color: var(--color-hover);
transform: rotate(360deg);
}
button:nth-child(5):hover ~ button {
color: var(--color-hover);
transform: rotate(360deg);
}
Completo
Aquí te dejo el ejemplo completo para que solo tengas que copiar y pegar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<style>
:root {
--color-inactivo: #5f5050;
--color-hover: #ffa400;
}
.valoracion {
display: flex;
flex-direction: row-reverse;
}
.valoracion button {
background-color: initial;
border: 0;
color: var(--color-inactivo);
transition: 1s all;
}
.valoracion button:hover {
cursor: pointer;
color: var(--color-hover);
transform: rotate(360deg);
}
button:nth-child(1):hover ~ button {
color: var(--color-hover);
transform: rotate(360deg);
}
button:nth-child(2):hover ~ button {
color: var(--color-hover);
transform: rotate(360deg);
}
button:nth-child(3):hover ~ button {
color: var(--color-hover);
transform: rotate(360deg);
}
button:nth-child(4):hover ~ button {
color: var(--color-hover);
transform: rotate(360deg);
}
button:nth-child(5):hover ~ button {
color: var(--color-hover);
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="valoracion">
<!-- Estrella 1 -->
<button>
<i class="fas fa-star"></i>
</button>
<!-- Estrella 2 -->
<button>
<i class="fas fa-star"></i>
</button>
<!-- Estrella 3 -->
<button>
<i class="fas fa-star"></i>
</button>
<!-- Estrella 4 -->
<button>
<i class="fas fa-star"></i>
</button>
<!-- Estrella 5 -->
<button>
<i class="fas fa-star"></i>
</button>
</div>
</body>
</html>
{{ comments.length }} comentarios