0

Hola alguien sabe como puedo darle a mis estrellas el efecto que giren y cambien de color al pasarle el mouse por encima como muestra esta pagina web https://programadorwebvalencia.com/css-valoracion-de-estrellas-animado/ Que propiedades tendría que agregarle a mi css?

    div.valoracion {
      position: relative;
      overflow: hidden;
      display: inline-block;
    }
    
    div.valoracion input {
      position: absolute;
      top: -100px;
    }
    
    div.valoracion label {
      float: right;
      color: #333;
      width: 23px;
      font-size: 25px;
      cursor: pointer;
    }
    
    div.valoracion label:hover,
    div.valoracion label:hover ~ label,
    div.valoracion input:checked ~ label {
      color: #dd4;
    }
 <div class="valoracion">
        <input id="radio1" type="radio" name="estrellas" value="5">
        <label for="radio1">★</label>
        <input id="radio2" type="radio" name="estrellas" value="4">
        <label for="radio2">★</label>
        <input id="radio3" type="radio" name="estrellas" value="3">
        <label for="radio3">★</label>
        <input id="radio4" type="radio" name="estrellas" value="2">
        <label for="radio4">★</label>
        <input id="radio5" type="radio" name="estrellas" value="1">
        <label for="radio5">★</label>
     </div>
    

0

2 respuestas 2

1

:root{
    --color-inactivo: #5f5050;
    --color-hover: #ffa400;
}

i{
    transition: all 800ms ease-in-out;
}

}
.star-rating input {
    display:none;
}

.star-rating :checked ~ i {
    color:var(--color-hover);
}

i:hover{
    transform: rotate(360deg);

}
  
.star-rating label:hover,
.star-rating label:hover ~ i { 
    color: var(--color-hover);
    cursor: pointer;
}
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a45b9a7436.js" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>

        <div class="star-rating">
                <input type="radio" id="5-stars"  value="5" />
                <label for="radio1" class="star"><i class="fas fa-star"></i></label>
                
                <input type="radio" id="4-stars" name="rating" value="4" />
                <label for="radio2" class="star"><i class="fas fa-star"></i></label>
                
                <input type="radio" id="3-stars" name="rating" value="3" />
                <label for="radio3" class="star"><i class="fas fa-star"></i></label>
                
                <input type="radio" id="2-stars" name="rating" value="2" />
                <label for="radio4" class="star"><i class="fas fa-star"></i></label>
                
                <input type="radio" id="1-star" name="estrellas" value="1" />
                <label for="radio4" class="star"><i class="fas fa-star"></i></label>
        </div>
        
</body>
</html>

Las estrellas rotan con este codigo, te recomiendo que para la seleccion del valor utilices javascript

3
  • Ya borre la anterior, gracias Commented el 13 jun. 2020 a las 19:12
  • Gracias :) Roberto Vargas.
    – isa
    Commented el 15 jun. 2020 a las 18:40
  • Fue util la respuesta @isa? Commented el 15 jun. 2020 a las 18:41
0

En la pagina que comparte está la explicación, faltan los transform: rotate dentro del :hover , lo que dice su códugo es que al pasar el mouse cambie de color, ni más, también después de eso, debe revisar si el float: right le puede ocasionar problema, intente cambiar a position absolutes no funciona.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.