Summit Focus Within Avatar

Focusing the action button lights a ring around the whole avatar block.

Stok kodu: ava-summit-focus
Görüntülenme: 0
Lisans: Ücretsiz

Canlı önizleme herkese açıktır. Kod sekmeleri, kopyalama, kaynak API'si ve izole önizleme belgesi üyelik gerektirir.

Üyelik gerekli

Kaynak kodu görmek için ücretsiz üye ol

HTML, CSS, React çıktısı, kopyalama ve tarayıcı editörü giriş yaptıktan sonra açılır.

Ücretsiz üye ol Giriş yap

Bu efektte bir sorun mu var, yoksa daha iyisini mi yazdın? Düzeltme gönder — onaylanırsa puan kazanırsın.

Sorun bildir veya düzelt

#focus-within #accessibility #ring

Summit Focus Within Avatar nasıl kullanılır?

1. HTML parçasını sayfanda kullanmak istediğin yere yapıştır.
2. CSS bloğunu stil dosyana veya bir <style> etiketine ekle.
3. Renkleri ve süreleri kendi tasarımına göre değiştir — bağımlılık yok, saf CSS.

Avatarlar kategorisindeki tüm efektler gibi bu efekt de tamamen ücretsizdir; ticari projelerde de kullanabilirsin. Kütüphanenin tamamı için Avatarlar koleksiyonuna göz at.

Benzer Avatarlar efektleri

Tümü

Canlı incele Avatarlar

Amber Stacked Avatar Group

Four overlapping avatars fan out into a spaced row while hovered.

#group #overlap #hover

Canlı incele Avatarlar

Dynamo Drawn Monogram Plate

An SVG stroke writes the monogram and then underlines it before restarting the loop.

#svg #monogram #stroke-dasharray

Canlı incele Avatarlar

Vault Selectable Avatar Grid

A radio group where the chosen avatar lifts out of the row and takes a warm ring.

#radio #selection #grid

Canlı incele Avatarlar

Anvil Quadrant Completion Meter

Four border arcs form the completion ring and the last quadrant lights up on hover.

#completion #arc #hover

Canlı incele Avatarlar

Arc Dotted Frame Avatar

Twelve separate dots replace the border and light up one after another around it.

#dots #frame #animation

Canlı incele Avatarlar

Aurora Banner Profile Card

A rectangular profile card whose aurora banner drifts behind the overlapping avatar.

#profile-card #gradient #animation

Canlı incele Avatarlar

Basalt Overflow Counter Avatars

Three rounded-square members plus a counter chip that widens on hover.

#group #counter #hover

Canlı incele Avatarlar

Bearing Active Speaker Avatars

The speaking member breathes inside a green glow while the silent one stays desaturated.

#active-speaker #glow #animation