Önizleme

Aurora arka planı saf CSS ile mümkün oldu. Blob, harika bir atmosfer yaratarak sorunsuz bir şekilde hareket etmeye devam ediyor.

Kullanım durumları ve özellikleri

• Kahraman Bölümü Arka Planı: Açılış sayfanızın veya açılış sayfanızın kahraman alanının arka planı için mükemmeldir.

• Saf CSS uygulaması: `backdrop filtresi’ gerekli değildir. Bu, blobun ana öğesine “filtre: bulanıklaştırma” uygulanarak kolayca elde edilebilir.

• Birden fazla blob için farklı gecikmeler ve süreler: Hareketin monotonluğunu önlemek için her biri ayarlanıyor.

• İçerik yer paylaşımı: Blobun üstüne “z-index: 1” içeren içeriği yer paylaşımlı olarak yerleştirebilirsiniz.

Tasarım ve kullanıcı deneyiminin önemli noktaları

1. filtre: bulanıklık(60 piksel) on ana öğede: Bunu tek tek bloblar yerine ana öğeye uygulayarak performansı artırın.

2. 8 ila 13 saniye arası dalga boyu farkı: Aynı ritmi takip etmeyerek doğal bir hareket hissi yaratmak.

3. Merkezden şeffaf hale getirmek için “radyal gradyan”: Pürüzsüz renk akışı, aurora stilinin yumuşak ışığının yarı saydam görünmesini sağlar.

Nasıl kişiselleştirilir

バリエーション例: サンセット

.aurora-blob-1 { background: radial-gradient(ellipse, #f97316 0%, transparent 70%); }

.aurora-blob-2 { background: radial-gradient(ellipse, #ef4444 0%, transparent 70%); }

.aurora-blob-3 { background: radial-gradient(ellipse, #f59e0b 0%, transparent 70%); }

ブレンドの強さを変える

.aurora-blobs { opacity: 0.8; } /* 強め */

.aurora-blobs { opacity: 0.4; } /* 弱め */

Uygulama kodu

<div class="aurora-wrap">

<div class="aurora-blobs">

  <div class="aurora-blob aurora-blob-1"></div>

  <div class="aurora-blob aurora-blob-2"></div>

  <div class="aurora-blob aurora-blob-3"></div>

  <div class="aurora-blob aurora-blob-4"></div>

</div>

<div class="aurora-content">

  <h2>夜空に踊る</h2>

  <p>ピュアCSSで演出するオーロラ背景。</p>

</div>

</div>



<style>
.aurora-wrap { position: relative; width: 100%; min-height: 400px; background: #030014; overflow: hidden; }

.aurora-blobs { position: absolute; inset: 0; filter: blur(60px); opacity: 0.65; }

.aurora-blob { position: absolute; border-radius: 50%; animation: aurora-move 10s ease-in-out infinite; }

.aurora-blob-1 { width: 400px; height: 300px; background: radial-gradient(ellipse, #6366f1 0%, transparent 70%); top: -100px; left: -100px; }

.aurora-blob-2 { width: 350px; height: 350px; background: radial-gradient(ellipse, #8b5cf6 0%, transparent 70%); top: -50px; right: -80px; animation-delay: -3s; animation-duration: 13s; }

.aurora-blob-3 { width: 300px; height: 250px; background: radial-gradient(ellipse, #06b6d4 0%, transparent 70%); bottom: -80px; left: 30%; animation-delay: -6s; animation-duration: 8s; }

.aurora-blob-4 { width: 250px; height: 300px; background: radial-gradient(ellipse, #ec4899 0%, transparent 70%); bottom: -60px; right: 10%; animation-delay: -2s; animation-duration: 11s; }

@keyframes aurora-move {

0%, 100% { transform: translate(0,0) scale(1); }

33% { transform: translate(30px,-20px) scale(1.05); }

66% { transform: translate(-20px,25px) scale(0.95); }

}

.aurora-content { position: relative; z-index: 1; text-align: center; padding: 3rem; }
</style>

Tarayıcı uyumluluk durumu

| Tarayıcı | Uyumluluk durumu |

|----------|----------|

| Krom 43+ | ✅ Tamamen uyumlu |

| Firefox 16+ | ✅ Tamamen uyumlu |

| Safari 9+ | ✅ Tamamen uyumlu |

| Kenar 79+ | ✅ Tamamen uyumlu |

Mavi filtreler mobil cihazlarda performansı etkileyebilir, bu nedenle animasyonu “animasyon: yok” ile durdurmayı veya “min-yükseklik”i ayarlamayı düşünün.