İçeriğe geç
LibraryCSS
Yükleyiciler

Sun Rays

Sun with rotating rays around a glowing yellow center.

Görüntülenme
0
Ücretsiz

Önizleme izole bir çerçevede çalışır — efekt sayfanın stillerini etkilemez.

Sun Rays kaynak kodu

Üyelere açık
.fx-loader-sun-rays{width:64px;height:64px;position:relative}
.fx-loader-sun-rays::before{content:"";position:absolute;inset:25%;border-radius:50%;background:radial-gradient(circle,#fef3c7,#f59e0b);box-shadow:0 0 16px #f59e0b}
.fx-loader-sun-rays::after{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0 11deg,#fbbf24 11deg 12deg,transparent 12deg 33deg,#fbbf24 33deg 34deg,transparent 34deg 56deg,#fbbf24 56deg 57deg,transparent 57deg 78deg,#fbbf24 78deg 79deg,transparent 79deg 101deg,#fbbf24 101deg 102deg,transparent 102deg 123deg,#fbbf24 123deg 124deg,transparent 124deg 146deg,#fbbf24 146deg 147deg,transparent 147deg 168deg,#fbbf24 168deg 169deg,transparent 169deg 191deg,#fbbf24 191deg 192deg,transparent 192deg 213deg,#fbbf24 213deg 214deg,transparent 214deg 236deg,#fbbf24 236deg 237deg,transparent 237deg 258deg,#fbbf24 258deg 259deg,transparent 259deg 281deg,#fbbf24 281deg 282deg,transparent 282deg 303deg,#fbbf24 303deg 304deg,transparent 304deg 326deg,#fbbf24 326deg 327deg,transparent 327deg 348deg,#fbbf24 348deg 349deg,transparent 349deg 360deg);border-radius:50%;animation:fx-ldr-sun-rays 8s linear infinite;mask:radial-gradient(circle,transparent 26%,#000 27%);-webkit-mask:radial-gradient(circle,transparent 26%,#000 27%)}
@keyframes fx-ldr-sun-rays{to{transform:rotate(360deg)}}

Kalan 0 satırı görmek için ücretsiz üye ol

Tüm efektler ücretsiz. Üyelik yalnızca tam kaynağı, kopyalamayı ve tarayıcı içi editörü açar.

Ücretsiz üye olGiriş 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

Katkıda bulunanlar

LibraryCSSEfekti eklediKurucu
#animation#gradient#transform#shadow

Sun Rays nasıl kullanılır?

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

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

Benzer Yükleyiciler efektleri

Tümü