Xem trước

Nền Aurora được tạo ra bằng CSS thuần túy. Các đốm màu tiếp tục chuyển động trơn tru, tạo ra một bầu không khí tuyệt vời.

Trường hợp sử dụng và tính năng

• Nền phần anh hùng: Hoàn hảo cho nền của khu vực anh hùng trên trang đích hoặc trang giật gân của bạn.

• Triển khai CSS thuần túy: backdrop-filter không bắt buộc. Điều này có thể đạt được một cách đơn giản bằng cách áp dụng filter: blur cho phần tử gốc của blob.

• Độ trễ và thời lượng khác nhau cho nhiều đốm màu: Đặt từng đốm màu để tránh sự đơn điệu của chuyển động.

• Lớp phủ nội dung: Bạn có thể phủ nội dung bằng z-index: 1 lên trên blob.

Điểm thiết kế và UX

1. filter: blur(60px) trên phần tử cha: Cải thiện hiệu suất bằng cách áp dụng nó cho phần tử cha thay vì các đốm màu riêng lẻ.

2. Sự khác biệt về bước sóng từ 8 đến 13 giây: Tạo cảm giác chuyển động tự nhiên bằng cách không theo cùng một nhịp điệu.

3. radial-gradient để làm cho nó trong suốt từ giữa: Màu sắc mượt mà làm cho ánh sáng dịu của phong cách cực quang trông mờ.

Cách tùy chỉnh

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

.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; } /* 弱め */

Mã triển khai

<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>

Trạng thái tương thích với trình duyệt

| Trình duyệt | Trạng thái tương thích |

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

| Chrome 43+ | ✅ Hoàn toàn tương thích |

| Firefox 16+ | ✅ Hoàn toàn tương thích |

| Safari 9+ | ✅ Hoàn toàn tương thích |

| Cạnh 79+ | ✅ Hoàn toàn tương thích |

Bộ lọc màu xanh lam có thể ảnh hưởng đến hiệu suất trên thiết bị di động, vì vậy hãy cân nhắc dừng hoạt ảnh bằng animation: none hoặc điều chỉnh min-height.