Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS Animación de SVG con CSS Transiciones y Transformaciones Transiciones y Transformaciones

Publicado por Melissa Schenter
Melissa Schenter
1,898 Puntos

.star-bg:hover { fill:white; transition:1s;} (¡esto logra el desafío! ¿Por qué no aceptará mi respuesta? ¡Gracias!)

Este desafío me pide que "cree una transición de 1s para la propiedad fill de .star-bg. ¡Mi respuesta a continuación logra esto! ¿Sabes por qué no la acepta? Gracias.

.star-bg:hover {

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Animación de SVG con CSS</title>
    <link rel=stylesheet href=base.css>
    <link rel=stylesheet href=style.css>
</head>
<body>
  <svg xmlns=http://www.w3.org/2000/svg viewBox=60 60 240 240>
     <g>
      <circle class=star-bg fill=#40adcf stroke=#fff stroke-width=6 cx=180 cy=180 r=108.3/>
      <ruta class=star fill=#fff stroke=#fff stroke-width=2 stroke-linecap=round stroke-linejoin=round d=M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z/>
  </g>
  </svg>
</body>
</html>
style.css 
/* Completa el desafío escribiendo CSS a continuación */
.star-bg:desplazamiento del ratón {
  fill:white;
  transition:1s;
}

2 Respuestas

Rabin Gharti Magar
sello-máscara
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Rabin Gharti Magar
Desarrollo Web Front End Graduado de Techdegree 20,938 Puntos
Rabin Gharti Magar
.a{fill-rule:evenodd;}techdegree seal-36
Rabin Gharti Magar
Desarrollo Web Front End Graduado de Techdegree 20,938 Puntos

Hola Melissa Schenter,

Miré la pregunta del desafío de código y el código que has escrito no coincide con lo que te han pedido que hagas. Voy a desglosarlo en pequeñas secciones para que lo entiendas mejor.

  1. Antes de crear un hover state, solo debes apuntar a .star-bg y agregar un 1s transition property.

    .star-bg {
transition: fill 1s;
}

  2. Luego creas un hover state sugiere .star-bg y cambias el fill color a steelblue. Usaste un white color de relleno que es incorrecto.

.star-bg:desplazamiento del ratón {
  fill: azul acero;
}

¡Espero que esto te ayude!

Melissa Schenter
Melissa Schenter
1,898 Puntos
Melissa Schenter
Melissa Schenter
1,898 Puntos

Hola Rabin,

¡Gracias por la ayuda! No me di cuenta de que podía incluir la propiedad "fill" después de "transition:". Solo había visto "fill" como "fill:" con una lista de sus propias propiedades después. No vi esto usado de esta manera en uno de los videos. ¿Me lo perdí?

No había llegado a la segunda parte que pedía un color "steelblue". Solo elegí un color al azar porque no sabía cómo usar "fill" de otra manera además de "fill: [insertar color]."

Gracias nuevamente por la aclaración.

Saludos,

Rabin Gharti Magar
.a{fill-rule:evenodd;}techdegree seal-36
Rabin Gharti Magar
Desarrollo Web Front End Graduado de Techdegree 20,938 Puntos

Si quieres aprender cómo transition property funciona, consulta este sitio web: https://www.w3schools.com/css/css3_transitions.asp

¡Feliz Codificación!