Saltar al contenido principal
Codigo Heroe
Desafío anterior
Degradados radiales #2 / Práctica10/15
Volver al inicio del nivel
  1. 1. Forma del degradado I
  2. 2. Forma del degradado II
  3. 3. Radio del círculo I
  4. 4. Radio del círculo II
  5. 5. Tamaño de la elipse I
  6. 6. Tamaño de la elipse II
  7. 7. Tamaño de la elipse III
  8. 8. Tamaño de la elipse IV
  9. 9. Transiciones bruscas I
  10. 10. Transiciones bruscas II
  11. 11. Tamaño del degradado I
  12. 12. Tamaño del degradado II
  13. 13. Tamaño del degradado III
  14. 14. Tamaño del degradado IV
  15. 15. Tamaño del degradado V
Siguiente desafío
  • Matriz de skills

Cargando…
Estará listo en unos segundos.

  • Desafío

Transiciones bruscas II

Replica el ejemplo modificando el código
DificultadFácil
CategoríaHTML/CSS
Ahora
Estado actual de la página
Ejemplo
Resultado que debes obtener
ResultadoAparecerá después de la primera comprobaciónAparecerá después
  • index.html
  • style.css
HTML
CSS
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Transiciones bruscas: posiciones de las paradas de color</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="local-10.css"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="scene"><div class="two-rings"></div></main> </body> </html>
.two-rings { background-image: radial-gradient( circle at left top, #fef3c7 {{position1}}, #f59e0b {{position2}}, #f59e0b {{position3}}, #7c2d12 {{position4}} ); }
-4
Vista previa

El código cambió. Haz clic en «Actualizar» o activa la ejecución automática.

Saliste de la página del desafío.

Haz clic dentro de la vista previa para enfocar esta ventana.

100%
0
    Completado 0%.

    Desafío completado

    Movimientos adicionales
    Continuar
    Codigo Heroe

    © 2023-2026, codigoheroe.com