Animation

Color blend compare

Zwei Farbfelder durchlaufen dasselbe Farbpaar, eines gemischt mit rohen Kanalwerten und eines mit linearem Licht, und zeigen den Rückgang, den ein einfacher Übergang verursacht.

Naive mix

Linear-light mix

Color blend compare verwenden

Zwei Farbfelder durchlaufen dasselbe Farbpaar, eines gemischt mit rohen Kanalwerten und eines mit linearem Licht, und zeigen den Rückgang, den ein einfacher Übergang verursacht.

Teste die Vorschau mit Maus und Tastatur. Prüfe den sichtbaren Fokus und das Layout auf schmalen Bildschirmen in deiner eigenen Seite. Nenne deinem Agenten die Nummer oder den Bezeichner, um diese Komponente abzurufen.

Eigenschaften: fromColor, toColor, cycleSeconds, showLabels, pinMidpoint

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Vorschau und Beschreibung sind öffentlich. Melde dich mit einem berechtigten Konto an, um Code, Framework-Versionen und Installation zu öffnen.

Verbinde deinen Agenten

Ähnliche Komponenten

1782Keyframe morph loopAnimationEin Quadrat, das eine Schleifenroutine aus Wachsen, Drehen und Runden zu einem Kreis durchführt und dabei jede Pose beibehält, da die Timing-Stopps ungleichmäßig sind.

2192Morphing icon loopAnimationEin einzelnes gefülltes Symbol formt sich kontinuierlich in das nächste Symbol in einer kurzen Liste um, wobei seine Umrisse fließend von einer Silhouette zur nächsten übergehen, während sich seine Füllfarbe entsprechend ändert.

2193Morphing icon toggleAnimationEin kleines Symbol verändert seinen Umriss in einer stetigen Schleife kontinuierlich zwischen zwei Formen und zwei Farben.

1791Orbiting badgesAnimationKleine Abzeichen, die gleichmäßig um eine oder zwei kreisförmige Schienen verteilt sind, wobei sich jeder Ring mit seiner eigenen Geschwindigkeit und Richtung dreht, während die Abzeichen aufrecht bleiben.

1792Path followerAnimationEine abgerundete Kachel, die sich entlang einer spiralförmigen Bahn bewegt, während die Bahn selbst vor ihr einfährt und dann rückwärts zum Start zurückfährt.

2201Path OrbitAnimationKarten bewegen sich auf einem gemeinsamen geschlossenen Pfad, gleichmäßig verteilt und endlos kreisend, wobei die Pfadform zwischen einer Ellipse, einem Kreis und einem Stern umschaltbar ist.