Animación

Morphing icon toggle

Un pequeño icono cambia continuamente su contorno entre dos formas y dos colores en un bucle constante.

Sync

Build

Cómo usar Morphing icon toggle

Un pequeño icono cambia continuamente su contorno entre dos formas y dos colores en un bucle constante.

Prueba la vista previa con el cursor y el teclado. Comprueba el foco visible y la composición en pantallas estrechas dentro de tu página. Usa el número de ficha o el identificador cuando pidas el componente a tu agente.

Propiedades: intervalSeconds, colorOne, colorTwo

¿Qué frameworks están disponibles?

El catálogo incluye estas versiones: react, vue, svelte, astro, html. La vista previa de esta página utiliza React.

¿Cómo accedo a la implementación?

El código, las versiones y los comandos de instalación están disponibles en el panel superior.

Conecta tu agente

Relacionados

2170Icon Shape MorphAnimaciónUn único ícono relleno cambia suavemente su forma al siguiente ícono en una secuencia, con el contorno deformándose continuamente entre formas en lugar de desvanecerse o intercambiarse.

1766Color blend compareAnimaciónDos muestras se repiten entre el mismo par de colores, una mezclada con valores de canal sin procesar y otra con luz lineal, lo que muestra la caída que produce una transición simple.

1782Keyframe morph loopAnimaciónUn cuadrado que ejecuta una rutina en bucle de crecer, girar y redondear en un círculo, manteniéndose en cada postura porque las paradas de tiempo son desiguales.

2192Morphing icon loopAnimaciónUn único ícono relleno cambia continuamente de forma al siguiente ícono en una lista corta, su contorno fluye suavemente de una silueta a la siguiente mientras su color de relleno cambia para coincidir.

1791Orbiting badgesAnimaciónPequeñas insignias espaciadas uniformemente alrededor de una o dos pistas circulares, cada anillo gira a su propia velocidad y dirección mientras las insignias permanecen en posición vertical.

1792Path followerAnimaciónUna loseta redondeada que avanza a lo largo de una pista en espiral mientras la pista se adelanta y luego retrocede hasta el inicio.