ساخت افکت صاعقه با CSS

افکت صاعقه (lightning effect) می‌تواند جلوه دراماتیک و جذابی به وب‌سایت‌ها، بازی‌های وبی یا بنرهای تبلیغاتی بدهد. با استفاده از CSS مدرن و تکنیک‌های ساده‌ای مانند keyframes، pseudo-elements و blend modes می‌توان افکت صاعقه‌ای بدون عکس یا جاوااسکریپت حجیم ایجاد کرد. در این مقاله روش‌های مختلف، مثال کاربردی، بهینه‌سازی و نکات دسترس‌پذیری را بررسی می‌کنیم.

چرا از CSS استفاده کنیم؟

• انعطاف‌پذیری بالا و کنترل دقیق روی انیمیشن‌ها
• کارایی بهتر نسبت به افکت‌های تصویری سنگین
• قابلیت ترکیب با SVG و فیلترها برای جلوه بیشتر

نمونه پایه: صاعقه ساده با pseudo-element

<div class="storm">
  <div class="bolt"></div>
</div>

/* CSS */.storm{
  position: relative;
  width: 300px;
  height: 200px;
  background: linear-gradient(#0b1430, #051022);
  overflow: hidden;
  border-radius: 6px;
}
.bolt{
  position: absolute;
  left: 50%;
  top: -40%;
  width: 4px;
  height: 120%;
  background: linear-gradient(#fff, #dff);
  transform-origin: top center;
  opacity: 0;
  filter: blur(0.6px);
  box-shadow: 0 0 12px rgba(200,220,255,0.9);
  animation: flash 2s infinite;
}
@keyframes flash{
  0%{opacity:0; transform: translateX(-50%) rotate(-10deg) scaleY(0.1);}
  8%{opacity:1; transform: translateX(-50%) rotate(5deg) scaleY(1);}
  12%{opacity:0.8; transform: translateX(-50%) rotate(-5deg) scaleY(0.9);}
  20%{opacity:0; transform: translateX(-50%) rotate(10deg) scaleY(0.2);}
  100%{opacity:0;}
}

در این مثال یک ظرف (.storm) داریم که پس‌زمینه تاریک شبیه آسمان طوفانی ایجاد می‌کند. عنصر .bolt به‌عنوان شاخه اصلی صاعقه عمل می‌کند؛ با تغییرات در opacity و transform و استفاده از keyframes رفتار پرتاب نور و ناپدید شدن شبیه‌سازی می‌شود. box-shadow و gradient برای درخشندگی استفاده شده‌اند.

افزودن شاخه‌های فرعی و لرزش سریع (flicker)

.bolt::before,
.bolt::after{
  content: "";
  position: absolute;
  left: -8px;
  top: 30%;
  width: 20px;
  height: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(200,220,255,0.6));
  transform-origin: left center;
  opacity: 0;
  box-shadow: 0 0 8px rgba(180,210,255,0.7);
}
@keyframes branch{
  0%{opacity:0; transform: scaleX(0) rotate(0);}
  40%{opacity:1; transform: scaleX(1) rotate(-20deg);}
  80%{opacity:1; transform: scaleX(1) rotate(10deg);}
  100%{opacity:0; transform: scaleX(0) rotate(0);}
}
.bolt::before{ top: 40%; left: -14px; animation: branch 2s infinite;}
.bolt::after{ top: 60%; left: -10px; animation: branch 2s 0.15s infinite;}
/* اضافه کردن flicker سریع روی کل کادر */@keyframes overlayFlash{
  0%{opacity:0;}
  10%{opacity:0.9;}
  15%{opacity:0.2;}
  20%{opacity:1;}
  30%{opacity:0;}
  100%{opacity:0;}
}
.storm::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.85);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: overlayFlash 2s infinite;
}

در این قسمت با استفاده از ::before و ::after شاخه‌های فرعی ایجاد کردیم تا صاعقه طبیعی‌تر به نظر برسد. انیمیشن branch شاخه‌ها را به‌صورت لحظه‌ای ظاهر و محو می‌کند. overlayFlash یک فلش سریع تمام‌صفحه شبیه رعد ایجاد می‌کند. mix-blend-mode باعث می‌شود فلش با پس‌زمینه تاریک به‌صورت درخشان نمایش داده شود.

بهینه‌سازی و نکات فنی

• برای کارایی بهتر از transform و opacity استفاده کنید؛ این‌ها توسط GPU شتاب می‌گیرند و از repaint کامل جلوگیری می‌کنند.
• از فیلترها و box-shadow با احتیاط استفاده کنید چون هزینه رندر را افزایش می‌دهند.
• برای کاهش بار انیمیشن‌ها، از will-change فقط روی عناصری که واقعاً متحرک‌اند بهره ببرید.

محافظت از کاربران حساس به حرکت

@media (prefers-reduced-motion: reduce){
  .bolt, .bolt::before, .bolt::after, .storm::after{
    animation: none;
    opacity: 0.0;
  }
}

این قطعه باعث می‌شود اگر کاربر تنظیمات سیستم خود را برای کاهش حرکت فعال کرده باشد، انیمیشن‌ها غیرفعال شوند. رعایت این مورد برای دسترس‌پذیری و تجربه کاربری اهمیت دارد.

مثال پیشرفته: چند صاعقه تصادفی با جاوااسکریپت (اختیاری)

// optional JS to trigger random lightning
const storm = document.querySelector('.storm');
function randomBolt(){
  const bolt = document.createElement('div');
  bolt.className = 'bolt temp';
  bolt.style.left = Math.random()*80 + '%';
  bolt.style.animationDuration = (1+Math.random()*1.2)+'s';
  storm.appendChild(bolt);
  setTimeout(()=> bolt.remove(), 2200);
}
setInterval(()=> {
  if(Math.random() > 0.7) randomBolt();
}, 800);

این اسکریپت اختیاری با ایجاد عناصر موقتی (.bolt.temp) به‌صورت تصادفی صاعقه‌های متعدد و ناهمزمان تولید می‌کند. از JS تنها برای کنترل رخدادها و زمان‌بندی استفاده شده؛ خود جلوه‌ها با CSS انجام می‌پذیرند.

تطبیق با SVG و فیلترها (برای شاخه‌بندی دقیق‌تر)

اگر به شکل‌گیری شاخه‌های پیچیده‌تر نیاز دارید، ترکیب SVG با CSS مناسب است: مسیرهای SVG می‌توانند دقیق‌تر رسم شوند و با stroke-dasharray انیمیشن شوند. سپس فیلتر Gaussian blur و feColorMatrix برای جلوه‌ی درخشندگی اعمال کنید.

جدول خصوصیات مهم و کاربرد

نکات حرفه‌ای و کاربردها

• در بازی‌ها یا صفحات تبلیغاتی از افکت‌های کوتاه و پراکنده استفاده کنید تا چشم‌نوازی حفظ شود بدون خسته‌کننده شدن.
• برای مصرف باتری در موبایل، نرخ و طول هر انیمیشن را کاهش دهید و از prefers-reduced-motion بهره ببرید.
• وقتی صاعقه با محتوای متنی هم‌زمان می‌شود، اطمینان حاصل کنید خوانایی متن حفظ شود (استفاده از overlay ملایم یا تغییر رنگ متن موقت).

خلاصه

ساخت افکت صاعقه با CSS ترکیبی از خلاقیت و بهینه‌سازی است. با استفاده از pseudo-elements، keyframes و blend modes می‌توان جلوه‌های چشمگیری ایجاد کرد. رعایت نکات عملکردی و دسترس‌پذیری باعث می‌شود تجربه کاربری در همه دستگاه‌ها مناسب باشد.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال